:root {
  --page: #ffffff;
  --panel: #ffffff;
  --text: #2f3b45;
  --heading: #17232c;
  --muted: #6d7b88;
  --line: #d7dfe6;
  --soft-line: #ecf0f4;
  --teal: #00796b;
  --teal-dark: #006154;
  --blue: #0b72e7;
  --yellow: #fff9bf;
  --yellow-line: #f1da73;
  --green-bg: #e7f8ee;
  --green: #17803b;
  --red-bg: #fff0f0;
  --red: #d83333;
  --orange-bg: #fff4dc;
  --orange: #b96700;
  --helper-text: #83909c;
  --helper-size: 12px;
  --helper-weight: 400;
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.key-tracker-page .owner-stat-strip {
  margin-bottom: 16px;
}

.key-tracker-table {
  margin-bottom: 18px;
}

.key-tracker-table-grid td {
  vertical-align: top;
}

.key-book-allocate-select {
  width: min(100%, 260px);
}

.access-asset-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(19, 39, 45, .06);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.access-asset-card.compact {
  padding: 14px;
}

.access-asset-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.access-asset-card header span,
.key-tag-preview span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.access-asset-card header strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  margin-top: 3px;
}

.access-asset-card header em {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  margin-top: 2px;
}

.access-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.access-code-reveal {
  border: 1px solid rgba(14, 72, 72, .16);
  background: #f4fbf8;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.access-code-reveal strong {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: .04em;
}

.access-code-reveal span {
  color: var(--muted);
  font-size: 12px;
}

.key-tag-preview {
  border: 1px dashed rgba(20, 45, 50, .28);
  border-radius: 9px;
  padding: 12px;
  background: #fbfcfb;
  display: grid;
  gap: 4px;
}

.key-tag-preview strong {
  color: var(--ink);
  font-size: 18px;
}

.key-tag-preview em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.access-asset-form input[name="lockbox_code"],
.access-asset-form input[name="digital_lock_code"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 760px) {
  .access-asset-card header,
  .access-code-reveal {
    align-items: stretch;
    flex-direction: column;
  }

  .access-code-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile iOS/PWA operating standard. Desktop density remains unchanged. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-target: 44px;
}

.pwa-icon-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(16, 51, 52, .14);
}

.pwa-settings-panel .section-heading {
  align-items: start;
}

.pwa-support-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.pwa-support-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafb;
}

.pwa-support-grid strong,
.pwa-support-grid span {
  display: block;
}

.pwa-support-grid span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.pwa-support-grid .ready {
  border-color: rgba(84, 198, 58, .28);
  background: #effaf0;
}

.pwa-support-grid .not-ready {
  border-color: rgba(240, 195, 106, .38);
  background: #fff8e7;
}

.pwa-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pwa-action-row span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    overscroll-behavior-y: none;
  }

  button,
  .button,
  input,
  select,
  textarea,
  .icon-button,
  .table-link {
    min-height: var(--touch-target);
  }

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

  .app-shell {
    min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  }

  .topbar {
    top: var(--safe-top);
    min-height: 64px;
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, .94);
  }

  .workspace {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    padding-bottom: calc(28px + var(--safe-bottom));
  }

  .table-workspace {
    height: auto;
    min-height: calc(100dvh - 64px - var(--safe-top));
    overflow: visible;
  }

  .page-section,
  .profile-panel,
  .settings-grid,
  .record-workspace,
  .dashboard-grid {
    min-width: 0;
  }

  .page-title-row,
  .page-title-actions,
  .section-heading,
  .settings-record-header {
    gap: 10px;
  }

  .page-title-actions,
  .settings-record-header > div,
  .section-heading > div:last-child {
    flex-wrap: wrap;
  }

  .delegate-user-record-actions,
  .magiclink-field,
  .support-access-summary {
    grid-template-columns: 1fr;
  }

  .delegate-user-record-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .delegate-user-record-actions > div,
  .delegate-user-record-actions .button,
  .magiclink-field .button {
    justify-content: center;
    width: 100%;
  }

  .filter-search .list-search,
  .global-search,
  .profile-form input,
  .profile-form select,
  .profile-form textarea,
  .portal-modal-fields input,
  .portal-modal-fields select,
  .portal-modal-fields textarea {
    min-height: var(--touch-target);
    border-radius: 8px;
  }

  .table-frame {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .table-frame .mobile-card-table {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: auto;
  }

  .mobile-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mobile-card-table tbody {
    display: grid;
    gap: 10px;
  }

  .mobile-card-table tbody tr:not(.table-group-row) {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(26, 44, 54, .05);
  }

  .mobile-card-table tbody tr[data-grid-flag-tone="danger"] {
    border-left-color: #ef6461;
  }

  .mobile-card-table tbody tr[data-grid-flag-tone="warning"] {
    border-left-color: #f3bc4f;
  }

  .mobile-card-table tbody tr[data-grid-flag-tone="success"] {
    border-left-color: #60c46f;
  }

  .mobile-card-table tbody tr[data-grid-flag-tone="info"] {
    border-left-color: #74a9f5;
  }

  .mobile-card-table tbody tr[data-grid-flag-tone="neutral"] {
    border-left-color: #a8b3bb;
  }

  .mobile-card-table tbody tr[data-grid-flag-tones] {
    border-left-color: transparent;
    background-image: var(--delegate-grid-flag-gradient), linear-gradient(#fff, #fff);
    background-position: left top, 0 0;
    background-repeat: no-repeat;
    background-size: 4px 100%, auto;
  }

  .mobile-card-table tbody tr[hidden] {
    display: none;
  }

  .mobile-card-table th,
  .mobile-card-table td {
    width: auto !important;
    min-width: 0 !important;
  }

  .mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 7px 0;
    border: 0;
    white-space: normal;
  }

  .mobile-card-table td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  .mobile-card-table td.select-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .mobile-card-table td.select-cell::before,
  .mobile-card-table td:empty::before {
    display: none;
  }

  .mobile-card-table .table-link,
  .mobile-card-table .table-link span,
  .mobile-card-table td strong,
  .mobile-card-table td span,
  .mobile-card-table td em,
  .mobile-card-table td a {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mobile-card-table .table-row-actions,
  .mobile-card-table .comment-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .table-group-row td {
    padding: 0;
    border: 0;
  }

  .table-group-toggle {
    min-height: var(--touch-target);
    border-radius: 8px;
  }

  .modal-backdrop,
  .public-modal-backdrop,
  .portal-request-modal-backdrop {
    align-items: end;
    padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  }

  .modal,
  .public-modal,
  .portal-request-modal,
  .email-preview-modal,
  .add-record-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
    overflow: auto;
    border-radius: 14px 14px 0 0;
  }

  .modal footer,
  .public-modal footer,
  .portal-request-modal footer,
  .add-record-modal footer {
    position: sticky;
    bottom: calc(-1 * var(--safe-bottom));
    padding-bottom: max(14px, var(--safe-bottom));
    background: #fff;
  }

  .pwa-support-grid {
    grid-template-columns: 1fr;
  }

  .pwa-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.opportunity-record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.opportunity-record-actions-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(26, 44, 54, .05);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.opportunity-record-actions-card span,
.opportunity-record-actions-card em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.opportunity-record-actions-card strong {
  display: block;
  color: var(--heading);
  font-size: 14px;
  font-weight: 700;
  margin: 2px 0;
}

@media (max-width: 720px) {
  .opportunity-record-actions-card {
    grid-template-columns: 1fr;
  }

  .opportunity-record-actions {
    justify-content: stretch;
  }

  .opportunity-record-actions .button {
    flex: 1 1 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-nav,
  .mobile-card-table tbody tr,
  .modal,
  .public-modal,
  .portal-request-modal {
    transition: none !important;
    animation: none !important;
  }
}

/* Delegate homepage studio redesign */
.delegate-studio {
  --studio-ink: #062728;
  --studio-green: #103334;
  --studio-green-2: #0b4340;
  --studio-accent: #4fd130;
  --studio-lime: #73df50;
  --studio-muted: #607579;
  --studio-line: rgba(16, 51, 52, .14);
  --studio-panel: #f7faf8;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(115, 223, 80, .14), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfdfb 54%, #eef6f1 100%);
  color: var(--studio-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.delegate-studio,
.delegate-studio * {
  box-sizing: border-box;
}

.delegate-studio p,
.delegate-studio h1,
.delegate-studio h2,
.delegate-studio h3,
.delegate-studio li,
.delegate-studio a,
.delegate-studio button,
.delegate-studio span,
.delegate-studio strong {
  white-space: normal;
}

.delegate-studio svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.delegate-studio .public-nav {
  width: 100%;
  max-width: none;
  min-height: 76px;
  margin: 0;
  padding: 0 clamp(26px, 6vw, 92px);
  border: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(115, 223, 80, .22), transparent 22%),
    linear-gradient(90deg, #052b2d, #073638 62%, #052829);
  box-shadow: 0 18px 60px rgba(6, 31, 32, .18);
}

.delegate-studio .public-logo {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  padding: 8px 12px 8px 10px;
}

.delegate-studio .public-logo img {
  width: 156px;
}

.delegate-studio .public-nav nav {
  gap: 10px;
}

.delegate-studio .public-nav nav a,
.delegate-studio .public-nav nav button {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
}

.delegate-studio .public-nav nav button,
.delegate-studio .public-primary {
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #6ee044, #2fb51b);
  color: #062728;
  box-shadow: 0 14px 34px rgba(47, 181, 27, .25);
  font-weight: 820;
}

.delegate-studio .public-signup,
.delegate-studio .public-secondary,
.delegate-studio .public-signin {
  min-height: 46px;
  border: 1px solid rgba(16, 51, 52, .24);
  border-radius: 10px;
  background: #fff;
  color: var(--studio-green);
  box-shadow: none;
  font-weight: 820;
}

.delegate-studio .public-nav .public-signup {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.delegate-studio .public-nav .public-signin {
  border: 0;
  background: transparent;
  color: #fff;
}

.studio-hero {
  display: grid;
  grid-template-columns: minmax(360px, .76fr) minmax(650px, 1.24fr);
  gap: clamp(36px, 5vw, 82px);
  align-items: center;
  width: min(1440px, calc(100% - 96px));
  min-height: 650px;
  margin: 0 auto;
  padding: clamp(54px, 6vw, 86px) 0;
}

.studio-hero-copy h1 {
  margin: 0;
  max-width: 640px;
  color: var(--studio-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(68px, 7.2vw, 112px);
  font-weight: 650;
  line-height: .88;
  letter-spacing: 0;
}

.studio-hero-copy h1 span {
  color: #2ba01e;
}

.studio-hero-copy p {
  max-width: 600px;
  margin: 28px 0 0;
  color: #38585d;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.62;
}

.studio-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}

.studio-hero-actions .public-primary,
.studio-hero-actions .public-secondary,
.studio-final .public-primary {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-width: 166px;
  padding: 0 22px;
  text-decoration: none;
}

.studio-hero-actions svg,
.studio-final button svg {
  transform: rotate(-90deg);
}

.studio-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.studio-proof-list li {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #203e42;
  font-size: 13px;
  font-weight: 780;
}

.studio-proof-list svg {
  width: 18px;
  height: 18px;
  color: #2ba01e;
}

.studio-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  min-height: 470px;
  border: 1px solid rgba(16, 51, 52, .12);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(245, 250, 247, .92));
  box-shadow: 0 32px 92px rgba(16, 51, 52, .16);
}

.studio-workspace::after {
  content: "";
  position: absolute;
  inset: 28px 26px 84px 170px;
  border: 1px dashed rgba(43, 160, 30, .44);
  border-radius: 20px;
  pointer-events: none;
}

.studio-workspace-rail {
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px 14px;
  background: linear-gradient(180deg, #053233, #093f3e);
}

.studio-workspace-rail span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .78);
}

.studio-workspace-rail span:first-child {
  background: rgba(115, 223, 80, .16);
  color: var(--studio-lime);
}

.studio-workspace-main {
  position: relative;
  z-index: 1;
  min-height: 390px;
  padding: 24px;
}

.studio-card,
.studio-portal-stack article {
  border: 1px solid rgba(16, 51, 52, .12);
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 44px rgba(16, 51, 52, .10);
}

.studio-card {
  position: absolute;
  padding: 16px;
}

.studio-card header,
.studio-card-quotes p,
.studio-card-invoice dl,
.studio-flowline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.studio-card strong {
  color: #102d30;
  font-size: 14px;
}

.studio-card p,
.studio-card dd,
.studio-card dt,
.studio-card small,
.studio-card a,
.studio-portal-stack p {
  margin: 0;
  color: #607579;
  font-size: 12px;
  text-decoration: none;
}

.studio-card-request {
  left: 24px;
  top: 22px;
  width: 280px;
}

.studio-card-request header span {
  border-radius: 7px;
  background: #ffe7e5;
  color: #c43d32;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 760;
}

.studio-card-request > p {
  margin-top: 16px;
  color: #102d30;
  font-size: 15px;
  font-weight: 760;
}

.studio-card-request dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 0;
}

.studio-card-request small,
.studio-card-invoice dd {
  display: inline-flex;
  width: fit-content;
  margin-top: 14px;
  border-radius: 7px;
  background: #fff3d9;
  color: #a86600;
  padding: 6px 8px;
  font-weight: 760;
}

.studio-card-quotes {
  left: 308px;
  top: 44px;
  width: 226px;
}

.studio-card-quotes header a {
  color: #2ba01e;
  font-weight: 760;
  display: none;
}

.studio-card-quotes p {
  border-top: 1px solid #e5eeeb;
  padding-top: 12px;
  margin-top: 12px;
}

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

.studio-card-invoice {
  left: 60px;
  top: 260px;
  width: 246px;
}

.studio-card-invoice > p {
  margin-top: 13px;
  color: #102d30;
  font-size: 16px;
  font-weight: 760;
}

.studio-card-invoice dl {
  margin: 16px 0 0;
}

.studio-card-invoice dd {
  margin-top: 5px;
}

.studio-card-approval {
  left: 320px;
  top: 250px;
  width: 232px;
}

.studio-card-approval > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #34a82d;
  color: #fff;
}

.studio-card-approval strong {
  display: block;
  margin-top: 12px;
}

.studio-card-approval p {
  margin-top: 10px;
  line-height: 1.45;
}

.studio-portal-stack {
  position: absolute;
  right: 18px;
  top: 54px;
  display: grid;
  gap: 10px;
  width: 196px;
}

.studio-portal-stack article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.studio-portal-stack span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #eef8ef;
  color: #2ba01e;
}

.studio-portal-stack strong {
  color: #102d30;
  font-size: 13px;
}

.studio-portal-stack p {
  display: none;
}

.studio-flowline {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  border-top: 1px solid #dce9e4;
  background: rgba(255, 255, 255, .88);
  padding: 18px 28px 22px 94px;
}

.studio-flowline span {
  position: relative;
  display: grid;
  gap: 7px;
  justify-items: center;
  color: #38585d;
  font-size: 11px;
  font-weight: 760;
}

.studio-flowline i {
  width: 14px;
  height: 14px;
  border: 2px solid #063435;
  border-radius: 999px;
  background: #fff;
}

.studio-flowline span.active i {
  border-color: #2ba01e;
  background: #2ba01e;
}

.studio-trust-strip {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(115, 223, 80, .22), transparent 28%),
    linear-gradient(90deg, #052829, #073c3d);
  color: #fff;
  padding: 32px clamp(26px, 8vw, 124px);
}

.studio-trust-strip div {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px 18px;
  align-items: center;
}

.studio-trust-strip div svg {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  color: var(--studio-lime);
}

.studio-trust-strip strong {
  font-size: 17px;
}

.studio-trust-strip span {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

.studio-trust-strip ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-trust-strip li {
  border-left: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .86);
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 720;
}

.studio-portals,
.studio-workflow,
.studio-final,
.delegate-studio .public-footer {
  width: min(1360px, calc(100% - 96px));
  margin: 0 auto;
}

.studio-portals {
  display: grid;
  grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr);
  gap: 50px;
  align-items: stretch;
  padding: 72px 0;
}

.studio-section-copy h2,
.studio-final h2 {
  margin: 0;
  color: var(--studio-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 650;
  line-height: 1;
}

.studio-section-copy p,
.studio-final p {
  margin: 18px 0 0;
  color: var(--studio-muted);
  font-size: 16px;
  line-height: 1.62;
}

.studio-section-copy a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  color: #2ba01e;
  font-size: 14px;
  font-weight: 820;
  text-decoration: none;
}

.studio-section-copy a svg {
  width: 16px;
  transform: rotate(-90deg);
}

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

.studio-portal-cards article {
  border: 1px solid #dfeae6;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(16, 51, 52, .06);
}

.studio-portal-cards article > div {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #eaf8ec;
  color: #2ba01e;
}

.studio-portal-cards strong {
  display: block;
  margin-top: 18px;
  color: #102d30;
  font-size: 20px;
}

.studio-portal-cards p {
  min-height: 82px;
  margin: 12px 0 0;
  color: var(--studio-muted);
  font-size: 14px;
  line-height: 1.55;
}

.studio-portal-cards ul {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.studio-portal-cards li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #365256;
  font-size: 13px;
  font-weight: 700;
}

.studio-portal-cards li svg {
  width: 15px;
  color: #2ba01e;
}

.studio-workflow {
  display: grid;
  grid-template-columns: minmax(300px, .52fr) minmax(0, 1.48fr);
  gap: 44px;
  align-items: center;
  border-top: 1px solid var(--studio-line);
  padding: 72px 0;
}

.studio-workflow-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.studio-workflow-line article {
  position: relative;
  display: grid;
  justify-items: center;
  border-top: 1px dashed rgba(16, 51, 52, .4);
  padding: 0 16px;
  text-align: center;
}

.studio-workflow-line article:first-child {
  border-top-color: transparent;
}

.studio-workflow-line article span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border: 1px solid #cfe2d9;
  border-radius: 999px;
  background: #f5fbf6;
  color: var(--studio-green);
}

.studio-workflow-line strong {
  margin-top: 18px;
  color: #102d30;
  font-size: 15px;
}

.studio-workflow-line p {
  margin: 8px 0 0;
  color: var(--studio-muted);
  font-size: 12px;
  line-height: 1.48;
}

.studio-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  margin-bottom: 54px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 30%, rgba(115, 223, 80, .18), transparent 24%),
    linear-gradient(135deg, #052829, #073c3d);
  padding: 48px 58px;
  color: #fff;
}

.studio-final div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 22px;
  align-items: center;
}

.studio-final div > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  color: var(--studio-lime);
}

.studio-final h2 {
  color: #fff;
}

.studio-final p {
  max-width: 780px;
  color: rgba(255, 255, 255, .74);
}

.studio-final .public-primary {
  min-width: 190px;
}

.delegate-studio .public-footer {
  border-top: 1px solid var(--studio-line);
  padding-top: 30px;
}

@media (max-width: 1180px) {
  .studio-hero,
  .studio-portals,
  .studio-workflow,
  .studio-trust-strip,
  .studio-final {
    grid-template-columns: 1fr;
  }

  .studio-workspace {
    max-width: 860px;
  }

  .studio-trust-strip ul {
    grid-template-columns: 1fr;
  }

  .studio-trust-strip li {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-left: 0;
  }
}

@media (max-width: 820px) {
  .delegate-studio .public-nav {
    min-height: 72px;
    padding: 0 16px;
  }

  .delegate-studio .public-nav nav {
    display: none;
  }

  .delegate-studio .public-logo img {
    width: 136px;
  }

  .studio-hero,
  .studio-portals,
  .studio-workflow,
  .studio-final,
  .delegate-studio .public-footer {
    width: calc(100% - 30px);
  }

  .studio-hero {
    gap: 34px;
    min-height: auto;
    padding: 44px 0 50px;
  }

  .studio-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(42px, 12.4vw, 52px);
    line-height: .94;
  }

  .studio-hero-copy p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.58;
  }

  .studio-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .studio-proof-list {
    gap: 12px;
  }

  .studio-workspace {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .studio-workspace::after {
    display: none;
  }

  .studio-workspace-rail {
    display: flex;
    padding: 12px;
  }

  .studio-workspace-main {
    display: grid;
    gap: 12px;
    min-height: auto;
    padding: 16px;
  }

  .studio-card,
  .studio-portal-stack {
    position: static;
    width: auto;
  }

  .studio-portal-stack {
    display: grid;
  }

  .studio-flowline {
    overflow-x: auto;
    gap: 26px;
    justify-content: start;
    padding: 16px;
  }

  .studio-flowline span {
    min-width: 76px;
  }

  .studio-trust-strip {
    padding: 28px 18px;
  }

  .studio-trust-strip div {
    grid-template-columns: 1fr;
  }

  .studio-portal-cards,
  .studio-workflow-line {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .studio-portal-cards p {
    min-height: auto;
  }

  .studio-workflow-line article {
    justify-items: start;
    border-top: 0;
    border-left: 1px dashed rgba(16, 51, 52, .32);
    padding: 0 0 20px 24px;
    text-align: left;
  }

  .studio-workflow-line article span {
    margin: 0 0 10px -45px;
  }

  .studio-final {
    padding: 30px 22px;
  }

  .studio-final div {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.35;
}

#app {
  min-width: 0;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f7fafc 0%, #eef6f4 48%, #f8fbff 100%);
  padding: 24px;
}

.auth-panel {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(24, 36, 48, .14);
  padding: 28px;
}

.auth-brand {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.auth-brand img {
  width: 190px;
  max-width: 80%;
}

.auth-copy p,
.auth-message {
  color: var(--muted);
}

.auth-copy h1 {
  margin: 0 0 8px;
  color: var(--heading);
  font-size: 32px;
}

.auth-copy p {
  margin: 0 0 20px;
  line-height: 1.55;
}

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

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

.auth-form span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.auth-form input,
.auth-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 12px;
  font: inherit;
}

.auth-form .button {
  justify-content: center;
  min-height: 44px;
}

.auth-form .button.blue {
  border-color: #103334;
  background: #103334;
  color: #fff;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #7b8a96;
  font-size: 12px;
  font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.auth-google-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #fff;
  color: #1f1f1f;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  letter-spacing: .1px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.auth-google-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

.auth-google-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.auth-google-button:hover {
  background: #f8fafd;
  border-color: #5f6368;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .24);
}

.auth-google-button:focus-visible {
  outline: 2px solid rgba(66, 133, 244, .35);
  outline-offset: 2px;
}

.auth-google-button:disabled {
  cursor: wait;
  opacity: .72;
}

.auth-links {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.auth-links button,
.auth-links a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfd9df;
  border-radius: 999px;
  background: #fff;
  color: #0d2829;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
  text-decoration: none;
}

.auth-links button:hover,
.auth-links a:hover {
  background: #f6faf9;
  border-color: #9fb6b7;
  color: #0d2829;
  text-decoration: none;
}

.auth-message {
  border: 1px solid #bde9d6;
  border-radius: var(--radius-md);
  background: #f3fbf7;
  padding: 10px 12px;
  font-weight: 600;
}

.portal-signup-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.portal-signup-summary div {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 26px rgba(18, 35, 44, .05);
}

.portal-signup-summary span,
.portal-signup-summary em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.portal-signup-summary strong {
  display: block;
  margin: 7px 0 3px;
  color: var(--heading);
  font-size: 28px;
  line-height: 1;
}

.auth-routing {
  display: grid;
  gap: 6px;
  margin-top: 20px;
  border-top: 1px solid var(--soft-line);
  padding-top: 16px;
  font-size: 12px;
}

.auth-routing strong {
  color: var(--heading);
}

.public-site {
  min-height: 100vh;
  background: #fff;
  color: var(--text);
}

.public-site a {
  color: inherit;
  text-decoration: none;
}

.public-nav {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.public-logo img {
  width: 188px;
  display: block;
}

.public-nav nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-nav nav a,
.public-nav nav button,
.public-footer a,
.public-footer button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #30414a;
  font: inherit;
  font-weight: 650;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
}

.public-nav .public-signin {
  border-color: #cfd9df;
  background: #fff;
  color: #103334;
}

.public-primary,
.public-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 20px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
}

.public-primary {
  border: 1px solid #103334;
  background: #103334;
  color: #fff;
  box-shadow: 0 12px 28px rgba(16, 51, 52, .18);
}

.public-secondary {
  border: 1px solid #cfd9df;
  background: #fff;
  color: #103334;
}

.public-hero {
  width: min(1180px, calc(100% - 40px));
  margin: 22px auto 0;
  min-height: calc(100vh - 140px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
  align-items: center;
  gap: 70px;
  padding: 28px 0 70px;
}

.public-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: #152129;
  font-size: clamp(48px, 8vw, 96px);
  line-height: .95;
  letter-spacing: 0;
}

.public-hero-copy p {
  max-width: 640px;
  margin: 28px 0 0;
  color: #596a74;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
}

.public-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.public-hero-board {
  border: 1px solid #dbe4e9;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #f8fbfa 100%);
  box-shadow: 0 26px 70px rgba(22, 34, 42, .12);
  padding: 18px;
}

.public-board-top {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e5ecef;
  padding-bottom: 16px;
}

.public-board-top span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 35%, #9be27e 0 16%, #103334 17% 46%, #66d17a 47% 66%, transparent 67%);
  box-shadow: inset 0 0 0 7px #e7f8ee;
}

.public-board-top strong {
  color: #17232c;
  font-size: 17px;
}

.public-board-top em {
  color: #73818b;
  font-style: normal;
  font-size: 12px;
}

.public-board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.public-board-grid article,
.public-property-rail article,
.public-article-row article,
.public-blog-list article {
  border: 1px solid #dfe7eb;
  border-radius: 16px;
  background: #fff;
}

.public-board-grid article {
  padding: 14px;
}

.public-board-grid strong {
  display: block;
  color: #16242c;
  font-size: 28px;
}

.public-board-grid span,
.public-workflow-lines span,
.public-property-rail span,
.public-article-row p,
.public-blog-list p,
.public-form-message {
  color: #73818b;
}

.public-workflow-lines {
  display: grid;
  gap: 10px;
}

.public-workflow-lines span {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5ecef;
  border-radius: 14px;
  background: #fff;
  padding: 13px 14px;
  font-weight: 650;
}

.public-workflow-lines i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #74d77a;
}

.public-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0;
  border-top: 1px solid #eef2f4;
}

.public-split,
.public-property {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
  gap: 56px;
  align-items: start;
}

.public-section h2 {
  margin: 0;
  color: #17232c;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.public-section p {
  margin: 18px 0 0;
  color: #62727d;
  font-size: 17px;
  line-height: 1.65;
}

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

.public-proof-list span {
  border: 1px solid #dfe7eb;
  border-radius: 15px;
  background: #fff;
  color: #263841;
  padding: 16px 18px;
  font-weight: 700;
}

.public-property-card {
  border-left: 4px solid #103334;
  padding-left: 26px;
}

.public-property-rail {
  display: grid;
  gap: 12px;
}

.public-property-rail article {
  padding: 18px;
}

.public-property-rail strong,
.public-article-row h3,
.public-blog-list h2 {
  display: block;
  margin: 0 0 8px;
  color: #17232c;
}

.public-blog-preview .section-heading a {
  color: #103334;
  font-weight: 750;
}

.public-article-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.public-article-row article,
.public-blog-list article {
  padding: 22px;
}

.public-article-row article > span,
.public-blog-list article > span {
  display: block;
  margin-bottom: 14px;
  color: #00796b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.public-blog-hero {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 74px 0 58px;
}

.public-blog-hero h1 {
  margin: 0;
  color: #17232c;
  font-size: clamp(48px, 8vw, 90px);
  line-height: 1;
}

.public-blog-hero p {
  max-width: 700px;
  color: #657580;
  font-size: 20px;
  line-height: 1.55;
}

.public-blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.public-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eef2f4;
  color: #63727c;
  font-weight: 650;
}

.modal-backdrop,
.public-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: rgba(15, 28, 35, .42);
  padding: 18px;
}

.public-modal {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(11, 24, 32, .26);
  padding: 24px;
}

.public-modal header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.public-modal h2 {
  margin: 0 0 6px;
  color: #17232c;
  font-size: 30px;
}

.public-modal p {
  margin: 0;
}

.public-modal header button {
  width: 38px;
  height: 38px;
  border: 1px solid #d9e2e7;
  border-radius: 50%;
  background: #fff;
  color: #263841;
  font-size: 24px;
  cursor: pointer;
}

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

.public-demo-form label {
  display: grid;
  gap: 7px;
}

.public-demo-form label.wide,
.public-demo-form footer {
  grid-column: 1 / -1;
}

.public-demo-form span {
  color: #61727d;
  font-size: 12px;
  font-weight: 750;
}

.public-demo-form input,
.public-demo-form textarea {
  width: 100%;
  border: 1px solid #d3dde3;
  border-radius: 13px;
  background: #fff;
  color: #17232c;
  font: inherit;
  padding: 12px 13px;
}

.public-demo-form footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.public-form-message {
  border: 1px solid #cfe8dc;
  border-radius: 14px;
  background: #f3fbf7;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-weight: 650;
}

@media (max-width: 820px) {
  .public-nav {
    width: min(100% - 28px, 1180px);
    min-height: 72px;
  }

  .public-logo img {
    width: 150px;
  }

  .public-nav nav {
    gap: 6px;
  }

  .public-nav nav a,
  .public-nav nav button {
    padding: 8px 10px;
    font-size: 13px;
  }

  .public-hero,
  .public-split,
  .public-property,
  .public-article-row,
  .public-blog-list,
  .public-demo-form {
    grid-template-columns: 1fr;
  }

  .public-hero,
  .public-section,
  .public-blog-hero,
  .public-footer {
    width: min(100% - 28px, 1180px);
  }

  .public-hero {
    min-height: auto;
    gap: 34px;
    padding: 30px 0 54px;
  }

  .public-board-grid {
    grid-template-columns: 1fr;
  }

  .public-section {
    padding: 48px 0;
  }

  .public-demo-form footer {
    justify-content: stretch;
    flex-direction: column;
  }
}

.public-site {
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% 8%, rgba(126, 203, 143, .18), transparent 26%),
    linear-gradient(180deg, #fff 0%, #fff 62%, #f7faf9 100%);
  color: #18252d;
}

.public-nav {
  width: min(1220px, calc(100% - 48px));
  min-height: 88px;
  border-bottom: 1px solid rgba(215, 225, 230, .72);
}

.public-logo img {
  width: 178px;
}

.public-nav nav {
  gap: 6px;
}

.public-nav nav a,
.public-nav nav button,
.public-footer a,
.public-footer button {
  border-radius: 8px;
  color: #40505a;
  font-size: 14px;
  font-weight: 650;
  padding: 10px 12px;
}

.public-nav nav a:hover,
.public-nav nav button:hover,
.public-footer a:hover,
.public-footer button:hover {
  background: #f3f7f6;
  color: #103334;
}

.public-nav .public-signin {
  border-color: #cad8da;
  border-radius: 999px;
  color: #103334;
  padding-inline: 16px;
}

.public-primary,
.public-secondary {
  min-height: 46px;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 750;
}

.public-primary {
  border-color: #103334;
  background: #103334;
  color: #fff;
  box-shadow: 0 14px 30px rgba(16, 51, 52, .18);
}

.public-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(16, 51, 52, .22);
}

.public-secondary {
  border-color: #cbd8de;
  background: #fff;
  color: #103334;
}

.public-hero {
  width: min(1220px, calc(100% - 48px));
  min-height: calc(100vh - 116px);
  grid-template-columns: minmax(0, 1.06fr) minmax(460px, .84fr);
  gap: 76px;
  align-items: center;
  margin-top: 0;
  padding: 48px 0 86px;
}

.public-hero-copy h1 {
  max-width: 820px;
  color: #142028;
  font-size: clamp(54px, 7vw, 94px);
  line-height: .96;
  letter-spacing: -.02em;
}

.public-hero-copy p {
  max-width: 660px;
  margin-top: 30px;
  color: #52646f;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.58;
}

.public-hero-actions {
  margin-top: 36px;
}

.public-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 34px;
  color: #6b7a83;
  font-size: 13px;
  font-weight: 650;
}

.public-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.public-hero-proof span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #71cf73;
}

.public-hero-board {
  position: relative;
  border: 1px solid #d9e5e7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 32px 80px rgba(20, 32, 40, .14);
  padding: 18px;
  overflow: hidden;
}

.public-hero-board::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #103334, #62c970, #9ccfd7);
}

.public-board-top {
  grid-template-columns: 40px 1fr auto;
  padding: 12px 0 17px;
}

.public-board-top span {
  width: 40px;
  height: 40px;
  background: url("./public/favicon.png") center / cover no-repeat;
  box-shadow: none;
}

.public-board-top strong {
  color: #15222a;
  font-size: 16px;
}

.public-board-top em {
  border: 1px solid #d8e4e7;
  border-radius: 999px;
  background: #f7faf9;
  color: #657680;
  padding: 5px 9px;
  font-size: 11px;
}

.public-board-feature {
  margin: 18px 0;
  border: 1px solid #cfe7da;
  border-radius: 12px;
  background: #f5fbf7;
  padding: 18px;
}

.public-board-feature h2 {
  margin: 0;
  color: #143133;
  font-size: 22px;
  line-height: 1.1;
}

.public-board-feature p {
  margin: 8px 0 0;
  color: #5d7079;
  font-size: 13px;
  line-height: 1.55;
}

.public-board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.public-board-grid article,
.public-property-rail article,
.public-article-row article,
.public-blog-list article {
  border-color: #dfe8ec;
  border-radius: 10px;
  box-shadow: none;
}

.public-board-grid article {
  padding: 14px 12px;
}

.public-board-grid strong {
  color: #14232b;
  font-size: 27px;
  line-height: 1;
}

.public-board-grid span {
  display: block;
  margin-top: 7px;
  color: #71818a;
  font-size: 11px;
  line-height: 1.35;
}

.public-workflow-lines {
  gap: 8px;
  margin-top: 18px;
}

.public-workflow-lines span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  border-radius: 10px;
  padding: 12px 13px;
}

.public-workflow-lines i {
  grid-row: 1 / 3;
  background: #74d77a;
}

.public-workflow-lines strong {
  color: #26363e;
  font-size: 13px;
}

.public-workflow-lines em {
  color: #74838b;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.public-section {
  width: min(1220px, calc(100% - 48px));
  border-top-color: #edf2f4;
  padding: 86px 0;
}

.public-proof-strip {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid #dfe9eb;
  border-bottom: 1px solid #dfe9eb;
  padding: 28px 0;
}

.public-proof-strip span:first-child {
  color: #14232b;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 750;
  line-height: 1.12;
}

.public-proof-strip span:last-child {
  justify-self: end;
  max-width: 420px;
  color: #60727d;
  font-size: 16px;
  line-height: 1.55;
}

.public-split,
.public-property {
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1fr);
  gap: 70px;
}

.public-section h2 {
  max-width: 760px;
  color: #14232b;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.015em;
}

.public-section p {
  color: #5b6d77;
  font-size: 17px;
  line-height: 1.68;
}

.public-proof-list {
  gap: 0;
  border-top: 1px solid #dfe8ec;
}

.public-proof-list article {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid #dfe8ec;
  padding: 21px 0;
}

.public-proof-list strong {
  color: #17272f;
  font-size: 18px;
}

.public-proof-list span {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #647680;
  padding: 0;
  font-weight: 500;
  line-height: 1.5;
}

.public-system {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(520px, 1fr);
  gap: 64px;
  align-items: center;
}

.public-system-copy p {
  max-width: 620px;
}

.public-system-flow {
  min-height: 118px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe8e6;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f7fbfa);
  padding: 18px;
}

.public-system-flow span {
  display: grid;
  place-items: center;
  min-height: 66px;
  border: 1px solid #dfe8ec;
  border-radius: 10px;
  background: #fff;
  color: #20333b;
  font-weight: 750;
}

.public-system-flow i {
  display: none;
}

.public-property-card {
  border-left: 3px solid #103334;
  padding-left: 30px;
}

.public-property-rail {
  gap: 10px;
}

.public-property-rail article {
  padding: 20px;
}

.public-property-rail strong,
.public-article-row h3,
.public-blog-list h2 {
  color: #17272f;
}

.public-property-rail span {
  display: block;
  margin-top: 5px;
  line-height: 1.48;
}

.public-demo-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border: 1px solid #d8e7e4;
  border-radius: 18px;
  background: #f6fbf8;
  padding: 38px;
}

.public-demo-band h2 {
  font-size: clamp(30px, 3.2vw, 46px);
}

.public-demo-band p {
  max-width: 650px;
}

.public-blog-preview .section-heading a {
  color: #103334;
  font-size: 14px;
  text-decoration: none;
}

.public-article-row {
  gap: 16px;
}

.public-article-row article,
.public-blog-list article {
  padding: 24px;
}

.public-article-row article > span,
.public-blog-list article > span {
  color: #0d7f65;
  letter-spacing: .06em;
}

.public-footer {
  width: min(1220px, calc(100% - 48px));
  min-height: 92px;
  border-top-color: #dfe8ec;
}

@media (max-width: 980px) {
  .public-nav {
    width: min(100% - 30px, 1220px);
  }

  .public-nav nav a:not(.public-signin) {
    display: none;
  }

  .public-hero,
  .public-split,
  .public-property,
  .public-system,
  .public-proof-strip,
  .public-demo-band {
    grid-template-columns: 1fr;
  }

  .public-hero,
  .public-section,
  .public-footer {
    width: min(100% - 30px, 1220px);
  }

  .public-hero {
    min-height: auto;
    gap: 42px;
    padding: 42px 0 62px;
  }

  .public-hero-copy h1 {
    font-size: clamp(42px, 12vw, 70px);
  }

  .public-hero-board {
    max-width: 620px;
  }

  .public-proof-strip span:last-child {
    justify-self: start;
  }

  .public-system-flow,
  .public-board-grid,
  .public-article-row,
  .public-blog-list {
    grid-template-columns: 1fr;
  }

  .public-demo-band {
    padding: 28px;
  }
}

@media (max-width: 560px) {
  .public-logo img {
    width: 142px;
  }

  .public-nav {
    min-height: 74px;
  }

  .public-nav nav button {
    display: none;
  }

  .public-nav .public-signin {
    padding-inline: 13px;
  }

  .public-hero-copy p,
  .public-section p {
    font-size: 16px;
  }

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

  .public-primary,
  .public-secondary {
    width: 100%;
  }

  .public-hero-proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .public-board-top {
    grid-template-columns: 36px 1fr;
  }

  .public-board-top em {
    grid-column: 2;
    justify-self: start;
  }

  .public-property-card {
    border-left: 0;
    border-top: 3px solid #103334;
    padding: 18px 0 0;
  }
}

/* Premium public homepage system */
.public-site {
  background: #fff;
  color: #14232b;
}

.public-nav {
  width: min(1280px, calc(100% - 56px));
  min-height: 92px;
  border-bottom: 1px solid #e6ecef;
}

.public-logo img {
  width: 184px;
}

.public-nav nav {
  gap: 8px;
}

.public-nav nav a,
.public-nav nav button,
.public-footer a,
.public-footer button {
  border-radius: 999px;
  color: #3f5058;
  font-size: 14px;
  font-weight: 650;
  padding: 10px 14px;
}

.public-nav nav button {
  border-color: #103334;
  background: #103334;
  color: #fff;
}

.public-nav .public-signin {
  border-color: #d5e0e3;
  color: #103334;
}

.public-nav nav a:hover,
.public-footer a:hover,
.public-footer button:hover {
  background: #f5f8f7;
  color: #103334;
}

.public-nav nav button:hover,
.public-primary:hover {
  background: #0d2829;
  color: #fff;
  transform: translateY(-1px);
}

.public-primary,
.public-secondary {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 750;
}

.public-primary {
  border-color: #103334;
  background: #103334;
  box-shadow: 0 16px 38px rgba(16, 51, 52, .18);
}

.public-secondary {
  border-color: #d4e0e3;
  background: #fff;
  color: #103334;
}

.public-hero,
.public-section,
.public-footer {
  width: min(1280px, calc(100% - 56px));
}

.public-hero {
  min-height: calc(100vh - 112px);
  grid-template-columns: minmax(0, 1.02fr) minmax(500px, .88fr);
  gap: 86px;
  padding: 54px 0 92px;
}

.public-hero-copy h1 {
  max-width: 860px;
  color: #111e26;
  font-size: clamp(54px, 6.8vw, 92px);
  line-height: .98;
  letter-spacing: 0;
}

.public-hero-copy p {
  max-width: 670px;
  color: #536670;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.6;
}

.public-hero-proof {
  color: #70808a;
  font-size: 13px;
}

.public-hero-proof span::before {
  background: #103334;
  opacity: .72;
}

.public-hero-board {
  border: 1px solid #dce6e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(17, 30, 38, .12);
  padding: 20px;
}

.public-hero-board::before {
  height: 4px;
  background: #103334;
}

.public-board-top {
  padding-top: 14px;
}

.public-board-feature {
  border-color: #d8ebe0;
  border-radius: 10px;
  background: #f6fbf8;
}

.public-board-feature h2 {
  color: #113233;
  font-size: 23px;
  letter-spacing: 0;
}

.public-board-grid article,
.public-property-rail article,
.public-article-row article,
.public-blog-list article {
  border-radius: 8px;
}

.public-workflow-lines span,
.public-system-flow,
.public-system-flow span {
  border-radius: 8px;
}

.public-section {
  padding: 94px 0;
  border-top: 1px solid #edf2f4;
}

.public-proof-strip {
  padding: 32px 0;
  border-top-color: #dfe8eb;
  border-bottom-color: #dfe8eb;
}

.public-proof-strip span:first-child {
  color: #111e26;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: 0;
}

.public-proof-strip span:last-child {
  color: #5c707a;
}

.public-section h2 {
  color: #111e26;
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 1.04;
  letter-spacing: 0;
}

.public-section p {
  color: #5b6f79;
}

.public-proof-list {
  border-top-color: #dfe8eb;
}

.public-proof-list article {
  padding: 23px 0;
}

.public-proof-list strong {
  color: #14232b;
}

.public-system-flow {
  border-color: #dae6e8;
  background: #f8fbfa;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.public-property {
  align-items: center;
}

.public-property-card {
  border-left-color: #103334;
}

.public-demo-band {
  border: 0;
  border-radius: 12px;
  background: #103334;
  color: #fff;
  padding: 42px;
}

.public-demo-band h2,
.public-demo-band p {
  color: #fff;
}

.public-demo-band p {
  opacity: .82;
}

.public-demo-band .public-primary {
  border-color: #fff;
  background: #fff;
  color: #103334;
  box-shadow: none;
}

.public-blog-preview .section-heading {
  align-items: end;
}

.public-article-row article,
.public-blog-list article {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.public-article-row article:hover,
.public-blog-list article:hover {
  border-color: #cfdfe2;
  box-shadow: 0 18px 42px rgba(17, 30, 38, .08);
  transform: translateY(-2px);
}

.public-modal {
  border-radius: 12px;
}

@media (max-width: 980px) {
  .public-nav,
  .public-hero,
  .public-section,
  .public-footer {
    width: min(100% - 30px, 1280px);
  }

  .public-hero {
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 42px 0 64px;
  }

  .public-split,
  .public-property,
  .public-system,
  .public-proof-strip,
  .public-demo-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .public-nav {
    min-height: 76px;
  }

  .public-logo img {
    width: 148px;
  }

  .public-hero-copy h1 {
    font-size: clamp(40px, 11vw, 58px);
  }

  .public-demo-band {
    padding: 28px;
  }
}

.technology-stack-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 10px;
}

.technology-stack-panel .section-heading p {
  margin: 4px 0 0;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.technology-stack-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.technology-stack-grid a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  color: var(--heading);
  text-align: left;
  text-decoration: none;
  padding: 8px 9px;
}

.technology-stack-grid a:hover {
  border-color: #b9d8ff;
  background: #f6fbff;
}

.technology-stack-grid img,
.technology-stack-grid span {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
}

.technology-stack-grid img {
  object-fit: cover;
}

.technology-stack-grid span {
  display: grid;
  place-items: center;
  background: #e8f2ff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.technology-stack-grid strong {
  max-width: 100%;
  color: var(--heading);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technology-settings-panel {
  display: grid;
  gap: 16px;
}

.technology-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

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

.technology-settings-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  padding: 12px;
  box-shadow: 0 8px 22px rgba(16, 51, 52, .04);
}

.technology-settings-row:focus-within {
  border-color: #b7d7f5;
  box-shadow: 0 0 0 3px rgba(60, 130, 190, .10), 0 8px 22px rgba(16, 51, 52, .04);
}

.tech-preview {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid #dbe7ef;
  border-radius: 12px;
  background: #fff;
}

.tech-preview img,
.tech-preview > span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.tech-preview img {
  object-fit: cover;
}

.tech-preview > span {
  display: grid;
  place-items: center;
  background: #e8f2ff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.tech-preview small {
  position: absolute;
  right: -5px;
  bottom: -6px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #667887;
  font-size: 10px;
  font-weight: 700;
}

.tech-settings-fields {
  display: grid;
  grid-template-columns: minmax(140px, .9fr) minmax(220px, 1.35fr) minmax(180px, .95fr) minmax(150px, .8fr);
  gap: 10px;
  min-width: 0;
}

.technology-settings-row label:not(.button) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.technology-settings-row span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.technology-settings-row input,
.technology-settings-row select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 9px 10px;
}

.technology-settings-row input:focus,
.technology-settings-row select:focus {
  border-color: #8bbde8;
  box-shadow: 0 0 0 3px rgba(60, 130, 190, .12);
  outline: 0;
}

.tech-department-field select {
  appearance: none;
  background-color: #f8fbfd;
  background-image: linear-gradient(45deg, transparent 50%, #587082 50%), linear-gradient(135deg, #587082 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 32px;
}

.tech-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.tech-upload-button {
  justify-content: center;
  min-height: 38px;
}

.tech-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.tech-row-actions .button {
  min-height: 38px;
  white-space: nowrap;
}

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

button {
  cursor: pointer;
}

strong,
b {
  font-weight: 600;
}

svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 198px minmax(0, 1fr);
  overflow: hidden;
}

.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-right: 1px solid var(--line);
  background: #f4f6f8;
  padding: 14px 8px;
}

.side-nav nav {
  display: grid;
  align-content: start;
  gap: 3px;
}

.side-nav-section {
  color: #809293;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 6px 10px 4px;
  text-transform: uppercase;
}

.side-nav nav button,
.side-nav nav a,
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 9px;
}

.side-brand {
  width: 100%;
  display: block;
  border: 0;
  background: transparent;
  padding: 0 8px 16px;
  text-align: left;
}

.side-brand img {
  width: 130px;
  max-width: 100%;
  height: auto;
  display: block;
}

.side-nav nav button,
.side-nav nav a {
  width: 100%;
  height: 39px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #283640;
  padding: 0 12px;
  text-align: left;
  text-decoration: none;
}

.side-nav nav button.active,
.side-nav nav a.active {
  background: var(--teal);
  color: #fff;
  font-weight: 600;
}

.sidebar-profile {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--soft-line);
  background: transparent;
  color: var(--text);
  padding: 12px 8px 0;
  text-align: left;
  text-decoration: none;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-size: 13px;
}

.sidebar-profile div strong,
.sidebar-profile div span {
  display: block;
}

.sidebar-profile div strong {
  color: var(--heading);
  font-size: 12px;
}

.sidebar-profile div span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.app-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 68px auto minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 8000;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 34px;
}

.support-mode-slot:empty {
  display: none;
}

.support-mode-banner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
  padding: 5px 34px;
}

.support-mode-banner > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-mode-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.support-mode-avatar img,
.support-mode-avatar .avatar-initials {
  width: 100%;
  height: 100%;
  display: block;
}

.support-mode-avatar img {
  object-fit: cover;
  border-radius: inherit;
}

.support-mode-avatar .avatar-initials {
  display: grid;
  place-items: center;
}

.support-mode-banner strong,
.support-mode-banner em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-mode-banner strong {
  color: #7f1d1d;
  font-size: 12px;
  font-weight: 750;
}

.support-mode-banner em {
  margin-top: 0;
  color: #991b1b;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.support-mode-banner .button {
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  flex: 0 0 auto;
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
}

.mobile-menu-button,
.mobile-menu-backdrop {
  display: none;
}

.global-search-wrap {
  position: relative;
  width: min(560px, 48vw);
}

.global-search {
  width: min(520px, 46vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #83909c;
  padding: 0 12px;
}

.global-search-wrap .global-search {
  width: 100%;
}

.global-search input,
.list-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

.universal-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(68vh, 560px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 18px 48px rgba(24, 39, 54, .14);
  padding: 8px;
}

.universal-search-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 8px;
}

.universal-search-panel header strong {
  color: var(--heading);
  font-size: 13px;
}

.universal-search-panel header span,
.universal-search-panel p {
  color: var(--muted);
  font-size: 12px;
}

.universal-search-panel p {
  margin: 8px;
}

.universal-result {
  width: 100%;
  appearance: none;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.universal-result *,
.universal-result:hover *,
.universal-result:focus-visible * {
  text-decoration: none;
}

.universal-result:hover,
.universal-result:focus-visible {
  border-color: #cfe1ef;
  background: #f6fafc;
  outline: 0;
}

.universal-result span {
  grid-row: span 2;
  align-self: center;
  width: fit-content;
  border: 1px solid #dbe6ee;
  border-radius: 999px;
  background: #f3f7fa;
  color: #526a7d;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
}

.universal-result strong,
.universal-result em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.universal-result strong {
  color: var(--heading);
  font-size: 14px;
}

.universal-result em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-wrap,
.top-profile-wrap {
  position: relative;
  z-index: 7000;
}

.icon-button,
.top-profile-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #465765;
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.notification-button {
  position: relative;
}

.notification-button span {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d94f45;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.notification-permission {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  border: 1px solid #cfe0f5;
  border-radius: var(--radius-sm);
  background: #f5f9ff;
  color: var(--blue);
  padding: 9px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}

.top-profile-button {
  padding: 0;
  overflow: hidden;
}

.top-profile-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
  font-size: 14px;
}

.top-menu-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  font-size: 15px;
}

.icon-button.active,
.top-profile-button.active {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 132, 122, .12);
}

.notification-panel,
.top-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 7100;
  width: 330px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 18px 48px rgba(24, 39, 54, .14);
  padding: 8px;
}

.notification-panel header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 10px;
}

.notification-panel header strong,
.top-profile-menu strong {
  color: var(--heading);
}

.notification-panel header span {
  color: var(--muted);
  font-size: 12px;
}

.notification-panel button,
.notification-panel a,
.top-profile-menu button,
.top-profile-menu a {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px;
  text-align: left;
  text-decoration: none;
}

.notification-panel button:hover,
.notification-panel a:hover,
.top-profile-menu button:hover,
.top-profile-menu a:hover {
  border-color: #cfe1ef;
  background: #f6fafc;
}

.notification-panel button strong,
.notification-panel a strong,
.notification-panel button span,
.notification-panel a span,
.notification-panel button em,
.notification-panel a em {
  display: block;
}

.notification-panel button span,
.notification-panel a span {
  margin-top: 3px;
  color: #60707d;
  font-size: 12px;
}

.notification-panel button em,
.notification-panel a em {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.top-profile-menu {
  width: 250px;
}

.top-profile-menu-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--soft-line);
  margin-bottom: 6px;
  padding: 8px;
}

.top-profile-menu-head img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
}

.top-profile-menu-head > div > span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.top-profile-menu button,
.top-profile-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
}

.top-profile-menu button svg,
.top-profile-menu a svg {
  width: 16px;
  height: 16px;
}

.button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #32414d;
  padding: 0 12px;
  font-weight: 600;
  text-decoration: none;
}

.button.blue {
  border-color: #103334;
  background: #103334;
  color: #fff;
}

.button.subtle {
  border-color: transparent;
  background: transparent;
  color: #4c5a66;
}

.button.tiny {
  min-height: 30px;
  padding: 0 10px;
  color: var(--teal);
  border-color: #b9d7d3;
  background: #f6fbfa;
}

.button.tiny.danger {
  color: #9b2c2c;
  border-color: #f2c9c9;
  background: #fff7f7;
}

.feature-request-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace {
  max-width: none;
  margin: 0;
  padding: 28px 34px 48px;
  min-height: 0;
  overflow: auto;
}

.table-workspace {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 24px;
}

.page-header {
  margin-bottom: 18px;
}

.page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.maintenance-invoice-email {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.maintenance-invoice-email strong {
  margin-left: 4px;
  color: var(--heading);
  font-weight: 600;
}

.page-header h1 {
  margin: 0 0 18px;
  color: var(--heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.tabs button,
.tabs a {
  position: relative;
  border: 0;
  background: transparent;
  color: #3f4c57;
  padding: 0 0 13px;
  white-space: nowrap;
  text-decoration: none;
  font: inherit;
}

.tabs button.active,
.tabs a.active {
  color: var(--teal);
  font-weight: 600;
}

.tabs button.active::after,
.tabs a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--teal);
}

.tabs span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  margin-left: 7px;
  border: 1px solid #b8cedd;
  border-radius: 999px;
  background: #eef7ff;
  color: #0d5c93;
  font-size: 12px;
  font-weight: 700;
  padding: 0 7px;
}

.tabs button.active span,
.tabs a.active span {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.action-lane {
  margin: 0 -34px 24px;
  border-top: 1px solid var(--yellow-line);
  border-bottom: 1px solid var(--yellow-line);
  background: var(--yellow);
  padding: 17px 34px;
}

.action-toggles {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.action-toggles button {
  height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: #2f3b45;
  padding: 0 14px;
}

.action-toggles button.active {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}

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

.action-cards button {
  min-height: 64px;
  border: 1px solid #f0d884;
  border-radius: 3px;
  background: #fff8df;
  color: #2f3b45;
  padding: 10px 12px;
  text-align: left;
}

.action-cards button.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}

.action-cards strong,
.action-cards span {
  display: block;
}

.action-cards strong {
  color: #c46c00;
  font-size: 18px;
  line-height: 1;
}

.action-cards span {
  margin-top: 4px;
}

.page-section {
  background: #fff;
  width: 100%;
}

.table-workspace .page-section {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  color: #687784;
  overflow: visible;
}

.filter-bar > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.live-filter-bar {
  position: relative;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(260px, 336px) minmax(420px, 1fr);
  align-items: end;
  column-gap: clamp(28px, 4vw, 72px);
  overflow: visible;
}

.live-filter-bar > div {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.live-filter-bar > div > .button {
  flex: 0 0 auto;
}

.live-filter-bar .filter-select {
  width: clamp(96px, 7vw, 128px);
}

.live-filter-bar .filter-select select {
  width: 100%;
}

.shared-table-toolbar > div {
  justify-content: flex-end;
}

.shared-table-toolbar .table-control-panel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible;
}

.table-control-actions,
.table-control-group {
  display: inline-flex;
  align-items: end;
  gap: 8px;
  min-height: 48px;
  padding: 7px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #fbfcfd;
}

.table-control-actions {
  flex: 0 0 auto;
  align-items: center;
  background: transparent;
  border-color: transparent;
  padding: 0;
  min-height: 38px;
}

.table-control-actions .button {
  min-height: 38px;
  height: 38px;
  border-radius: 8px;
  color: #2f3f4b;
  font-size: 13px;
  font-weight: 740;
  padding: 0 13px;
}

.table-control-group {
  position: relative;
  padding-top: 18px;
}

.table-control-group-label {
  position: absolute;
  top: 5px;
  left: 8px;
  color: #738393;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.shared-table-toolbar .filter-select {
  width: clamp(116px, 8vw, 152px);
}

.shared-table-toolbar .filter-select select {
  width: 100%;
}

.shared-table-toolbar .table-flag-select {
  width: clamp(120px, 9vw, 156px);
}

.table-control-group-filters {
  flex-wrap: wrap;
  max-width: min(100%, 720px);
}

.table-control-menu {
  flex: 0 0 auto;
  position: relative;
  width: max-content;
  min-width: 0;
  z-index: 20;
}

.table-control-menu[open],
.table-column-manager[open] {
  z-index: 120;
}

.table-control-menu > summary {
  list-style: none;
}

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

.table-control-menu-trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #2f3f4b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 740;
  box-shadow: 0 1px 0 rgba(16, 51, 52, .03);
}

.table-control-menu-trigger svg {
  width: 16px;
  height: 16px;
  color: currentColor;
  stroke-width: 1.9;
}

.table-control-menu-trigger span {
  line-height: 1.1;
  white-space: nowrap;
}

.table-skeleton-toolbar .button[disabled],
.table-skeleton-toolbar .table-column-manager-trigger[disabled],
.table-skeleton-toolbar .table-control-menu-trigger[disabled],
.table-skeleton-toolbar input[disabled] {
  cursor: default;
  opacity: .86;
}

.table-skeleton-toolbar .table-control-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-skeleton-toolbar .table-skeleton-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #d7e2e8;
  border-radius: 8px;
  background: #fff;
  color: var(--heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 0 12px;
  white-space: nowrap;
}

.table-skeleton-toolbar .table-skeleton-control svg {
  width: 15px;
  height: 15px;
}

.table-control-menu[open] .table-control-menu-trigger,
.table-control-menu.is-active .table-control-menu-trigger,
.table-control-menu-trigger:hover,
.table-control-menu-trigger:focus-visible {
  border-color: #b7cad3;
  background: #f3f5f6;
  outline: 0;
}

.table-control-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  width: min(520px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #d9e4ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 51, 52, .16);
  overflow: hidden;
}

.table-control-menu-filter .table-control-menu-panel {
  width: min(620px, calc(100vw - 40px));
}

.table-control-menu-colour .table-control-menu-panel {
  width: min(620px, calc(100vw - 40px));
}

.table-control-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.table-control-menu-panel .filter-select {
  min-width: 0;
  width: 100%;
}

.table-control-menu-panel .filter-select select {
  min-width: 0;
  width: 100%;
}

.table-control-menu-panel input {
  min-width: 0;
  width: 100%;
  height: 38px;
  border: 1px solid #d5e0e7;
  border-radius: 8px;
  background: #fff;
  color: #263641;
  padding: 0 10px;
  font: inherit;
}

.table-control-empty,
.table-control-helper {
  margin: 0;
  color: #728292;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.table-colour-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.table-colour-preview span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  color: #334453;
  font-size: 12px;
  font-weight: 750;
  background: #fbfcfd;
}

.table-colour-preview i {
  width: 9px;
  height: 18px;
  border-radius: 99px;
  display: inline-block;
}

.table-colour-preview [data-tone="danger"] i {
  background: #e8524f;
}

.table-colour-preview [data-tone="warning"] i {
  background: #e8ad22;
}

.table-colour-preview [data-tone="success"] i {
  background: #4caf50;
}

.table-colour-preview [data-tone="info"] i {
  background: #4f92df;
}

.table-colour-rules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf2f5;
  min-width: 0;
}

.table-colour-rules-header {
  display: grid;
  gap: 2px;
}

.table-colour-rules-header strong {
  color: #263641;
  font-size: 13px;
  font-weight: 800;
}

.table-colour-rules-header span {
  color: #728292;
  font-size: 12px;
  font-weight: 650;
}

.table-colour-rule {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(104px, .95fr) minmax(120px, 1.2fr) minmax(92px, .85fr) 34px;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e1e8ed;
  border-radius: 9px;
  background: #fbfcfd;
}

.table-colour-rule-remove {
  width: 34px;
  height: 34px;
  align-self: end;
}

.shared-table-toolbar .filter-search {
  justify-self: start;
  width: min(336px, 100%);
}

.filter-bar:not(.live-filter-bar) > div {
  justify-content: flex-end;
}

.filter-bar:not(.live-filter-bar) .button {
  flex: 0 0 auto;
}

.filter-bar:not(.live-filter-bar) {
  column-gap: clamp(28px, 4vw, 72px);
}

.maintenance-toolbar-row {
  display: grid;
  grid-template-columns: minmax(260px, 336px) minmax(420px, 1fr);
  align-items: start;
  column-gap: clamp(28px, 4vw, 72px);
}

.filter-search {
  min-width: 220px;
  flex: 1 1 340px;
  display: grid;
  gap: 5px;
}

.filter-search > span {
  color: #667887;
  font-size: 11px;
  font-weight: 600;
}

.filter-search .list-search {
  margin-bottom: 0;
}

.maintenance-toolbar-row > div {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.maintenance-toolbar-row > div > .button {
  flex: 0 0 auto;
}

.maintenance-toolbar-row .filter-select {
  width: clamp(96px, 7vw, 128px);
}

.maintenance-toolbar-row .filter-select select {
  width: 100%;
}

.filter-select {
  display: grid;
  gap: 5px;
}

.filter-select span {
  color: #667887;
  font-size: 11px;
  font-weight: 600;
}

.filter-select select {
  height: 36px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 0 10px;
}

.list-search {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: #83909c;
  padding: 0 12px;
  margin-bottom: 10px;
}

.table-frame {
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: auto;
  background: #fff;
  overscroll-behavior: contain;
}

.table-workspace .table-frame {
  flex: 1;
  min-height: 0;
}

.table-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.table-row-actions .button svg {
  width: 16px;
  height: 16px;
}

.table-loading-row {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.table-loading-row::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 72%) 48%, transparent 100%),
    repeating-linear-gradient(180deg, #edf3f6 0 14px, transparent 14px 38px);
  background-size: 240% 100%, 100% 100%;
  animation: delegate-grid-skeleton 1.35s linear infinite;
  opacity: .72;
  z-index: -1;
}

.table-error-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -8px 0 12px;
  padding: 10px 12px;
  border: 1px solid #f0c36a;
  border-radius: 5px;
  background: #fff7df;
  color: #8a5a00;
  font-size: 13px;
  font-weight: 600;
}

.table-error-state span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table th {
  user-select: none;
}

.data-table th,
.data-table td,
.data-table td strong,
.data-table td span,
.data-table td em,
.data-table button,
.data-table a {
  white-space: nowrap;
}

.data-table th,
.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.data-table td span,
.data-table td em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-action-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.table-action-cell .button.compact {
  min-height: 32px;
  padding: 6px 10px;
}

.data-table thead th {
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 8;
  background: #f8fafb;
  box-shadow: inset 0 -1px 0 var(--line);
}

.data-table thead th::after {
  content: "";
  margin-left: 6px;
  color: #9aa9b5;
  font-size: 10px;
}

.data-table thead th[data-sort-direction="asc"]::after {
  content: "^";
  color: var(--blue);
}

.data-table thead th[data-sort-direction="desc"]::after {
  content: "v";
  color: var(--blue);
}

.table-frame table.data-table thead th,
.table-frame .generic-custom-table thead th,
.table-frame .maintenance-financial-table thead th {
  position: sticky !important;
  top: 0;
  z-index: 12;
  background: #f8fafb;
  box-shadow: inset 0 -1px 0 var(--line);
}

.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7b86;
  vertical-align: middle;
  cursor: help;
}

.info-tooltip:focus-visible {
  outline: 2px solid rgba(16, 51, 52, .25);
  outline-offset: 2px;
}

.info-tooltip-icon,
.info-tooltip-icon svg {
  display: inline-grid;
  place-items: center;
}

.info-tooltip-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.info-tooltip-popover {
  position: fixed;
  z-index: 9000;
  border: 1px solid #d8e2e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(31, 45, 55, .16);
  color: #465865;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  pointer-events: none;
}

.table-group-row td {
  height: 24px;
  background: #f6f8fb;
  color: #344450;
  font-size: 10px;
  letter-spacing: .01em;
  text-transform: uppercase;
  padding: 1px 8px;
}

.table-group-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 2px 0;
  text-align: left;
  cursor: pointer;
}

.table-group-toggle strong,
.table-group-toggle span,
.table-group-toggle em {
  display: inline-flex;
  align-items: center;
}

.table-group-toggle span {
  min-width: 14px;
  height: 14px;
  justify-content: center;
  border-radius: 999px;
  background: #e5edf5;
  color: #435565;
  font-size: 9px;
  line-height: 1;
}

.table-group-toggle strong {
  font-weight: 600;
}

.table-group-toggle em {
  margin-left: auto;
  color: #7b8792;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.table-group-row.collapsed td {
  background: #f1f5f8;
}

.compliance-cell {
  display: grid;
  gap: 4px;
  min-width: 210px;
}

.compliance-cell strong,
.compliance-cell span {
  display: block;
}

.compliance-cell strong {
  color: var(--heading);
  font-size: 13px;
}

.compliance-cell span {
  color: #667887;
  font-size: 12px;
}

.compliance-table {
  min-width: 1160px;
}

.compliance-table td {
  height: 66px;
  vertical-align: middle;
}

.dc-smoke-compliance-table {
  min-width: 1240px;
}

.dc-smoke-compliance-table th:nth-child(1),
.dc-smoke-compliance-table td:nth-child(1) {
  width: 30%;
  min-width: 320px;
}

.dc-smoke-compliance-table th:nth-child(2),
.dc-smoke-compliance-table td:nth-child(2) {
  width: 18%;
  min-width: 190px;
}

.dc-smoke-compliance-table th:nth-child(3),
.dc-smoke-compliance-table td:nth-child(3) {
  width: 22%;
  min-width: 240px;
}

.dc-smoke-compliance-table th:nth-child(4),
.dc-smoke-compliance-table td:nth-child(4),
.dc-smoke-compliance-table th:nth-child(5),
.dc-smoke-compliance-table td:nth-child(5) {
  width: 13%;
  min-width: 150px;
}

.dc-smoke-compliance-table th:nth-child(6),
.dc-smoke-compliance-table td:nth-child(6) {
  width: 10%;
  min-width: 130px;
}

.compliance-demo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid #bfe6d0;
  border-radius: var(--radius-md);
  background: #eefaf3;
  padding: 12px 14px;
}

.compliance-demo-strip strong,
.compliance-demo-strip span {
  display: block;
}

.compliance-demo-strip strong {
  color: var(--heading);
  font-size: 15px;
}

.compliance-demo-strip span {
  margin-top: 3px;
  color: #607483;
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  line-height: 1.4;
}

.property-active-table {
  min-width: 1120px;
  table-layout: fixed;
}

.property-active-table tbody tr:not(.table-group-row) {
  height: 66px;
  max-height: 66px;
}

.property-active-table th,
.property-active-table td {
  white-space: nowrap !important;
}

.property-active-table tbody tr:not(.table-group-row) td {
  height: 66px;
  max-height: 66px;
  overflow: hidden;
  vertical-align: middle;
}

.property-active-table td *,
.property-active-table .table-link,
.property-active-table .table-link strong,
.property-active-table .table-link span {
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.property-active-table td > strong,
.property-active-table td > span,
.property-active-table td > em {
  display: block;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.property-active-table th:nth-child(1),
.property-active-table td:nth-child(1) {
  width: 26%;
}

.property-active-table th:nth-child(2),
.property-active-table td:nth-child(2) {
  width: 17%;
}

.property-active-table th:nth-child(3),
.property-active-table td:nth-child(3) {
  width: 17%;
}

.property-active-table th:nth-child(4),
.property-active-table td:nth-child(4) {
  width: 14%;
}

.property-active-table th:nth-child(5),
.property-active-table td:nth-child(5) {
  width: 12%;
}

.property-active-table th:nth-child(6),
.property-active-table td:nth-child(6),
.property-active-table th:nth-child(7),
.property-active-table td:nth-child(7) {
  width: 7%;
}

.property-active-custom-table th,
.property-active-custom-table td {
  width: auto !important;
}

.property-agreement-table {
  min-width: 1120px;
  table-layout: fixed;
}

.property-agreement-table th,
.property-agreement-table td {
  white-space: nowrap;
}

.property-agreement-table th:nth-child(1),
.property-agreement-table td:nth-child(1) {
  width: 29%;
}

.property-agreement-table th:nth-child(2),
.property-agreement-table td:nth-child(2) {
  width: 15%;
}

.property-agreement-table th:nth-child(3),
.property-agreement-table td:nth-child(3) {
  width: 16%;
}

.property-agreement-table th:nth-child(4),
.property-agreement-table td:nth-child(4) {
  width: 22%;
}

.property-agreement-table th:nth-child(5),
.property-agreement-table td:nth-child(5) {
  width: 9%;
}

.property-agreement-table th:nth-child(6),
.property-agreement-table td:nth-child(6) {
  width: 9%;
}

.property-agreement-table td > strong,
.property-agreement-table td > span,
.property-agreement-table .table-link strong,
.property-agreement-table .table-link span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-active-custom-table thead th[data-property-column] {
  position: relative;
  padding-right: 28px;
}

.property-active-custom-table .is-pinned-property-column {
  position: sticky;
  z-index: 3;
  background: #fff;
  box-shadow: 1px 0 0 rgba(18, 34, 42, .08);
}

.property-active-custom-table thead .is-pinned-property-column {
  z-index: 5;
  background: #f8fafb;
}

.property-active-custom-table.has-pinned-property-columns tbody tr:hover .is-pinned-property-column {
  background: #f8fbfa;
}

.generic-custom-table {
  table-layout: fixed;
}

.delegate-grid-table tbody tr:not(.table-group-row) > :first-child {
  border-left: 4px solid transparent;
}

.delegate-grid-table tbody tr[data-grid-flag-tone] > :first-child {
  border-left-color: #cdd7dc;
}

.delegate-grid-table tbody tr[data-grid-flag-tone="danger"] > :first-child {
  border-left-color: #ef6461;
}

.delegate-grid-table tbody tr[data-grid-flag-tone="warning"] > :first-child {
  border-left-color: #f3bc4f;
}

.delegate-grid-table tbody tr[data-grid-flag-tone="success"] > :first-child {
  border-left-color: #60c46f;
}

.delegate-grid-table tbody tr[data-grid-flag-tone="info"] > :first-child {
  border-left-color: #74a9f5;
}

.delegate-grid-table tbody tr[data-grid-flag-tone="neutral"] > :first-child {
  border-left-color: #a8b3bb;
}

.delegate-grid-table tbody tr[data-grid-flag-tones] > :first-child {
  border-left-color: transparent;
  background-image: var(--delegate-grid-flag-gradient);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 4px 100%;
}

.generic-custom-table thead th {
  position: relative;
  vertical-align: middle;
}

.generic-custom-table thead th > .info-tooltip {
  margin-left: 4px;
}

.generic-custom-table .is-pinned-generic-column {
  position: sticky;
  z-index: 3;
  background: #fff;
  box-shadow: 1px 0 0 rgba(18, 34, 42, .08);
}

.generic-custom-table thead .is-pinned-generic-column {
  z-index: 5;
  background: #f8fafb;
}

.generic-custom-table.has-pinned-generic-columns tbody tr:hover .is-pinned-generic-column {
  background: #f8fbfa;
}

.generic-column-resize-handle {
  right: 2px;
}

.generic-table-column-manager .table-column-manager-panel {
  width: min(390px, calc(100vw - 32px));
}

.delegate-grid-loading-row td {
  padding: 14px 16px;
}

.delegate-grid-skeleton-row td {
  border-bottom: 1px solid var(--soft-line);
  background: #fff;
}

.delegate-grid-skeleton {
  display: grid;
  grid-template-columns: repeat(var(--delegate-skeleton-cols, 4), minmax(72px, 1fr));
  gap: 12px;
  align-items: center;
  min-height: 28px;
  opacity: .96;
}

.delegate-grid-skeleton span {
  width: var(--skeleton-width, 70%);
  height: 14px;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef1 0%, #f7fafb 34%, #eef3f5 68%, #e8eef1 100%);
  background-size: 240% 100%;
  animation: delegate-grid-skeleton 1.45s linear infinite;
  animation-delay: var(--delegate-skeleton-delay, 0ms);
}

.delegate-grid-skeleton span:first-child {
  height: 16px;
}

.record-skeleton-screen .record-file,
.record-skeleton-screen .record-activity,
.record-skeleton-screen .workstream {
  min-height: 320px;
}

.record-skeleton-card {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.record-skeleton-screen .record-file {
  gap: 12px;
}

.record-skeleton-screen .record-activity {
  display: grid;
  gap: 14px;
  align-content: start;
}

.button[data-optimistic-loading="1"],
.table-mini-select[data-optimistic-loading="1"] {
  opacity: .72;
  pointer-events: none;
}

.button[data-optimistic-loading="1"] {
  position: relative;
}

.button[data-optimistic-loading="1"]::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -2px;
  animation: optimistic-action-spin .7s linear infinite;
}

.compact-number-input {
  width: 92px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

.roadmap-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 16px;
  align-items: start;
}

.roadmap-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.roadmap-intro div {
  display: grid;
  gap: 4px;
}

.roadmap-intro strong {
  color: var(--ink);
  font-size: 14px;
}

.roadmap-intro span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.roadmap-lane {
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #f8faf9;
  min-height: 260px;
  padding: 12px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.roadmap-lane-now {
  background: #fff1ef;
  border-color: #f2c2bb;
}

.roadmap-lane-next {
  background: #fff8e9;
  border-color: #efd39a;
}

.roadmap-lane-later {
  background: #edf6ff;
  border-color: #bed8ef;
}

.roadmap-lane-parked {
  background: #f1f3f5;
  border-color: #d7dee4;
}

.roadmap-lane-now header span {
  background: #ffe0dc;
  color: #9f2f26;
}

.roadmap-lane-next header span {
  background: #ffedc2;
  color: #8a5c08;
}

.roadmap-lane-later header span {
  background: #dbeeff;
  color: #1f5d90;
}

.roadmap-lane-parked header span {
  background: #e3e8ec;
  color: #53606a;
}

.roadmap-lane.is-over {
  border-color: rgba(12, 118, 94, .42);
  background: #f2fbf7;
  box-shadow: inset 0 0 0 1px rgba(12, 118, 94, .12);
}

.roadmap-lane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--ink);
}

.roadmap-lane header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e7f4ef;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.roadmap-lane > div,
.roadmap-lane-dropzone {
  display: grid;
  gap: 10px;
  min-height: 190px;
  align-content: start;
}

.roadmap-card {
  width: 100%;
  border: 1px solid var(--soft-line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 6px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(18, 34, 42, .05);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.roadmap-card.is-dragging {
  opacity: .55;
  transform: scale(.98);
}

.roadmap-card button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 6px;
  color: inherit;
  cursor: pointer;
}

.roadmap-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.roadmap-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.roadmap-card:hover,
.roadmap-card:focus-visible {
  border-color: rgba(12, 118, 94, .34);
  box-shadow: 0 10px 24px rgba(18, 34, 42, .08);
}

.roadmap-card span {
  color: var(--muted);
  font-size: 12px;
}

.feature-request-overview,
.delegate-widget-cards,
.feature-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.feature-request-overview article,
.delegate-widget-cards button,
.delegate-widget-cards a,
.feature-decision-grid article {
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
}

.feature-request-overview strong,
.delegate-widget-cards strong,
.feature-decision-grid strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 6px;
}

.feature-request-overview span,
.delegate-widget-cards span,
.delegate-widget-cards em,
.feature-decision-grid span,
.feature-decision-grid em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.feature-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: start;
}

.feature-record-main,
.feature-record-activity .activity-panel,
.delegate-role-card,
.delegate-widget-strip {
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(18, 34, 42, .04);
}

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

.feature-brief-card label,
.feature-request-modal-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.feature-brief-card .span-2,
.feature-request-modal-fields .span-2 {
  grid-column: 1 / -1;
}

.feature-brief-card input,
.feature-brief-card select,
.feature-brief-card textarea,
.feature-request-modal-fields input,
.feature-request-modal-fields select,
.feature-request-modal-fields textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  background: #fff;
}

.feature-brief-card textarea,
.feature-request-modal-fields textarea {
  min-height: 94px;
  resize: vertical;
}

.feature-decision-grid {
  margin-top: 14px;
  margin-bottom: 0;
}

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

.feature-context-list div {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 10px;
}

.feature-context-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.feature-context-list span {
  color: var(--muted);
  font-size: 12px;
}

.feature-context-list strong {
  color: var(--ink);
  font-size: 13px;
}

.delegate-dashboard-custom {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
  margin-bottom: 16px;
}

.delegate-role-card {
  display: grid;
  gap: 14px;
}

.delegate-role-card span {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.delegate-role-card h2 {
  margin: 3px 0 6px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.delegate-role-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.delegate-role-card div:last-child {
  display: grid;
  gap: 8px;
}

.delegate-role-card button,
.delegate-role-card a,
.delegate-widget-cards button,
.delegate-widget-cards a {
  cursor: pointer;
}

.delegate-role-card button,
.delegate-role-card a {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #f8faf9;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
}

.delegate-widget-strip {
  display: grid;
  gap: 12px;
}

.personal-dashboard {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15, 35, 36, .06);
}

.personal-dashboard-header,
.personal-dashboard-actions,
.personal-dashboard-tabs,
.personal-dashboard-filters,
.personal-widget header,
.personal-widget-controls {
  align-items: center;
  display: flex;
  gap: 10px;
}

.personal-dashboard-header {
  justify-content: space-between;
}

.personal-dashboard-header h2,
.personal-widget h3 {
  color: var(--ink);
  margin: 0;
}

.personal-dashboard-header h2 {
  font-size: 20px;
}

.personal-dashboard-header p,
.personal-widget header span,
.personal-widget em,
.personal-widget small,
.personal-dashboard-status {
  color: var(--muted);
}

.personal-dashboard-header p {
  margin: 4px 0 0;
}

.personal-dashboard-header > div > span,
.personal-widget header span {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.personal-dashboard-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.personal-dashboard-status {
  border-radius: 999px;
  background: #eef7f1;
  color: #167a4c;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.personal-dashboard-tabs {
  overflow-x: auto;
  padding-bottom: 2px;
}

.personal-dashboard-tabs button {
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: #f8faf9;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
}

.personal-dashboard-tabs button.active {
  background: #113c3b;
  border-color: #113c3b;
  color: #ffffff;
}

.personal-dashboard-filters {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.personal-dashboard-filters label {
  display: grid;
  gap: 5px;
}

.personal-dashboard-filters span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.personal-dashboard-filters select {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
}

.personal-dashboard-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.personal-widget {
  border: 1px solid var(--soft-line);
  border-left: 4px solid #58c76d;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  gap: 12px;
  min-height: 168px;
  padding: 12px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.personal-widget:hover,
.personal-widget.is-over {
  border-color: #b9cfd0;
  box-shadow: 0 12px 28px rgba(15, 35, 36, .08);
}

.personal-widget.is-dragging {
  opacity: .6;
  transform: scale(.99);
}

.personal-widget.is-pinned {
  border-left-color: #113c3b;
}

.personal-widget.size-small {
  grid-column: span 1;
}

.personal-widget.size-medium {
  grid-column: span 2;
}

.personal-widget.size-wide {
  grid-column: span 3;
}

.personal-widget.size-full {
  grid-column: 1 / -1;
}

.personal-widget.empty {
  grid-column: 1 / -1;
  min-height: 130px;
}

.personal-widget header {
  justify-content: space-between;
}

.personal-widget h3 {
  font-size: 15px;
}

.personal-widget-controls button {
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0 8px;
}

.personal-widget-controls button.active,
.personal-widget-controls button:hover {
  background: #eef7f1;
  color: #113c3b;
}

.personal-widget-controls svg {
  height: 14px;
  width: 14px;
}

.personal-widget-kpi,
.personal-widget-score,
.personal-widget-list button,
.personal-widget-pulse button,
.personal-widget-tech button,
.personal-widget-collapsed {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.personal-widget-kpi {
  display: grid;
  gap: 4px;
}

.personal-widget-kpi strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.personal-widget-kpi span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.personal-widget-kpi em {
  font-size: 12px;
  font-style: normal;
}

.personal-widget-score {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 86px 1fr;
}

.personal-widget-score > span {
  align-items: center;
  aspect-ratio: 1;
  background: conic-gradient(#58c76d var(--score), #ecf1f1 0);
  border-radius: 50%;
  display: grid;
  justify-items: center;
  padding: 10px;
  position: relative;
}

.personal-widget-score > span::before {
  background: #ffffff;
  border-radius: 50%;
  content: "";
  inset: 9px;
  position: absolute;
}

.personal-widget-score strong,
.personal-widget-score em {
  position: relative;
  z-index: 1;
}

.personal-widget-score strong {
  color: var(--ink);
  font-size: 22px;
}

.personal-widget-score em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.personal-widget-bars,
.personal-widget-list,
.personal-widget-pulse,
.personal-widget-tech,
.personal-widget-funnel,
.personal-widget-kanban,
.personal-widget-checklist,
.personal-widget-tags,
.personal-widget-status-grid,
.personal-widget-table {
  display: grid;
  gap: 8px;
}

.personal-widget-bars div {
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr auto;
}

.personal-widget-bars span,
.personal-widget-bars strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.personal-widget-bars i {
  background: #eef3f3;
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  position: relative;
}

.personal-widget-bars i::after {
  background: #58c76d;
  border-radius: inherit;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: var(--value);
}

.personal-widget-list button,
.personal-widget-pulse button,
.personal-widget-tech a,
.personal-widget-tech button,
.personal-widget-checklist button,
.personal-widget-tags button,
.personal-widget-status-grid button,
.personal-widget-table button {
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  min-height: 40px;
  padding: 9px 10px;
  text-decoration: none;
}

.personal-widget-list button,
.personal-widget-tech a,
.personal-widget-tech button,
.personal-widget-checklist button,
.personal-widget-tags button,
.personal-widget-status-grid button,
.personal-widget-table button {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.personal-widget-list button span,
.personal-widget-tech button em,
.personal-widget-table button span:not(.primary) {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.personal-widget-pulse {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personal-widget-pulse strong {
  color: var(--ink);
  font-size: 18px;
}

.personal-widget-pulse span {
  color: var(--muted);
  font-size: 12px;
}

.personal-widget-funnel button {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0;
  text-align: left;
}

.personal-widget-funnel span,
.personal-widget-funnel strong {
  font-size: 12px;
  font-weight: 800;
}

.personal-widget-funnel i {
  background: #eef3f3;
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  position: relative;
}

.personal-widget-funnel i::after {
  background: linear-gradient(90deg, #113c3b, #58c76d);
  border-radius: inherit;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: var(--value);
}

.personal-widget-kanban {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.personal-widget-kanban section {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #f8faf9;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
}

.personal-widget-kanban header {
  display: flex;
  justify-content: space-between;
}

.personal-widget-kanban header strong,
.personal-widget-kanban header span {
  color: var(--ink);
  font-size: 12px;
}

.personal-widget-kanban button {
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px;
  text-align: left;
}

.personal-widget-kanban p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.personal-widget-checklist button {
  justify-content: flex-start;
}

.personal-widget-checklist i {
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 6px;
  color: var(--green);
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  margin-right: 8px;
  width: 24px;
}

.personal-widget-tags {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
}

.personal-widget-tags button {
  background: #f4fbf6;
  color: #113c3b;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 10px;
}

.personal-widget-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.personal-widget-status-grid button {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.personal-widget-status-grid button strong {
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 7px;
}

.personal-widget-status-grid button.ok strong {
  background: #e8f8ed;
  color: #167a4c;
}

.personal-widget-status-grid button.warn strong {
  background: #fff7df;
  color: #946200;
}

.personal-widget-status-grid button.bad strong {
  background: #fff0ed;
  color: #b42318;
}

.personal-widget-status-grid button.neutral strong {
  background: #eef3f3;
  color: var(--muted);
}

.personal-widget-table button {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(80px, .7fr) minmax(120px, 1fr);
  gap: 8px;
  justify-items: start;
}

.personal-widget-table .primary {
  color: var(--ink);
  font-weight: 900;
}

.personal-widget-tech a svg,
.personal-widget-tech a img,
.personal-widget-tech a span:first-child {
  flex: 0 0 auto;
}

.dashboard-library-backdrop {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  z-index: 12000;
}

.dashboard-library-modal {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(9, 25, 34, .28);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(86vh, 880px);
  max-width: 980px;
  overflow: hidden;
  padding: 20px;
  width: min(980px, calc(100vw - 32px));
}

.dashboard-library-modal > header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-library-modal > header span {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-library-modal > header h2 {
  margin: 3px 0 4px;
}

.dashboard-library-modal > header p {
  color: var(--muted);
  margin: 0;
}

.dashboard-library-grid {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 2px 4px 4px 0;
  scrollbar-gutter: stable;
}

.dashboard-library-grid section {
  display: grid;
  gap: 8px;
}

.dashboard-library-grid h3 {
  color: var(--ink);
  font-size: 13px;
  margin: 0;
}

.dashboard-library-grid section > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-library-grid article {
  background: #fff;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  display: grid;
  gap: 7px;
  padding: 12px;
}

.dashboard-library-grid article.active {
  background: #f4fbf6;
  border-color: #bfe6ca;
}

.dashboard-library-grid strong {
  color: var(--ink);
  font-size: 14px;
}

.dashboard-library-grid article > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delegate-widget-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.delegate-widget-cards button,
.delegate-widget-cards a {
  transition: border-color .16s ease, transform .16s ease;
}

.delegate-widget-cards button:hover,
.delegate-widget-cards button:focus-visible,
.delegate-widget-cards a:hover,
.delegate-widget-cards a:focus-visible {
  border-color: rgba(12, 118, 94, .3);
  transform: translateY(-1px);
}

.delegate-widget-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.delegate-widget-picker label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 8px;
  align-items: start;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
}

.delegate-widget-picker input {
  margin-top: 3px;
}

.delegate-widget-picker span,
.delegate-widget-picker em {
  grid-column: 2;
}

.delegate-widget-picker span {
  font-size: 13px;
  font-weight: 700;
}

.delegate-widget-picker em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.feature-request-modal {
  max-width: 820px;
}

.feature-request-modal-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.idea-bank-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #fff;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 12px 28px rgba(18, 34, 42, .04);
}

.idea-bank-hero strong {
  display: block;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.idea-bank-hero h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.idea-bank-hero p {
  margin: 0;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.5;
}

.idea-bank-hero > div:last-child {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 10px;
  align-items: baseline;
  min-width: 180px;
  border-left: 1px solid var(--soft-line);
  padding-left: 18px;
}

.idea-bank-hero > div:last-child span {
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.idea-bank-hero > div:last-child em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.idea-bank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.idea-bank-group {
  display: grid;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #f8faf9;
  padding: 12px;
}

.idea-bank-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.idea-bank-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.idea-bank-group header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e7f4ef;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.idea-bank-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-left: 4px solid #9aa8b3;
  border-radius: 9px;
  background: #fff;
  padding: 12px;
}

.idea-bank-card.is-promoted {
  border-left-color: var(--green);
  background: #fbfefc;
}

.idea-bank-card strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.idea-bank-card span,
.idea-bank-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.idea-bank-card p {
  margin: 0;
}

.idea-bank-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.idea-bank-meta > span:last-child {
  margin-left: auto;
  color: var(--ink);
  font-weight: 700;
}

.idea-bank-card footer {
  display: flex;
  justify-content: flex-end;
}

.master-build-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #fff;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 12px 28px rgba(18, 34, 42, .04);
}

.master-build-hero strong {
  display: block;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.master-build-hero h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.master-build-hero p {
  margin: 0;
  max-width: 820px;
  color: var(--muted);
  line-height: 1.5;
}

.master-build-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 10px;
  min-width: 170px;
  border-left: 1px solid var(--soft-line);
  padding-left: 18px;
  align-items: baseline;
}

.master-build-stats span {
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.master-build-stats em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.master-build-foundation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.master-build-foundation article {
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #f8faf9;
  padding: 14px;
}

.master-build-foundation strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 6px;
}

.master-build-foundation span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.master-build-phases {
  display: grid;
  gap: 14px;
}

.master-build-phase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #f8faf9;
  padding: 12px;
}

.master-build-phase > header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.master-build-phase h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.master-build-phase > header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e7f4ef;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.master-build-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-left: 4px solid #9aa8b3;
  border-radius: 9px;
  background: #fff;
  padding: 12px;
}

.master-build-card.is-promoted {
  border-left-color: var(--green);
  background: #fbfefc;
}

.master-build-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.master-build-card strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.master-build-card span,
.master-build-card p,
.master-build-card dd {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.master-build-card p {
  margin: 0;
}

.master-build-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.master-build-card dt {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.master-build-card dd {
  margin: 2px 0 0;
}

.master-build-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.master-build-card footer > span {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 980px) {
  .roadmap-lanes {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .dashboard-command-header,
  .dashboard-operations-grid,
  .delegate-operations-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-command-actions {
    justify-content: flex-start;
  }

  .feature-record-grid,
  .delegate-dashboard-custom {
    grid-template-columns: 1fr;
  }

  .personal-dashboard-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .personal-dashboard-actions {
    justify-content: flex-start;
  }

  .personal-dashboard-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-widget.size-small,
  .personal-widget.size-medium,
  .personal-widget.size-wide,
  .personal-widget.size-full {
    grid-column: span 1;
  }

  .dashboard-library-grid section > div {
    grid-template-columns: 1fr;
  }

  .delegate-widget-cards,
  .delegate-widget-picker,
  .idea-bank-grid,
  .master-build-foundation,
  .master-build-phase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .roadmap-lanes {
    grid-template-columns: 1fr;
  }

  .roadmap-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .feature-request-overview,
  .feature-decision-grid,
  .feature-brief-card,
  .feature-request-modal-fields,
  .personal-dashboard-filters,
  .personal-dashboard-grid,
  .delegate-widget-cards,
  .delegate-widget-picker,
  .idea-bank-grid,
  .idea-bank-hero,
  .master-build-hero,
  .master-build-foundation,
  .master-build-phase {
    grid-template-columns: 1fr;
  }

  .idea-bank-hero > div:last-child,
  .master-build-stats {
    border-left: 0;
    border-top: 1px solid var(--soft-line);
    padding-left: 0;
    padding-top: 12px;
  }

  .master-build-phase > header {
    grid-column: auto;
  }

  .master-build-card footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media print {
  .shell-sidebar,
  .topbar,
  .page-tabs,
  .page-actions,
  .chat-widget,
  .universal-search-panel {
    display: none !important;
  }

  .app-shell,
  .workspace {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .workspace {
    padding: 0 !important;
  }
}

@keyframes delegate-grid-skeleton {
  0% { background-position: 240% 50%; }
  100% { background-position: -40% 50%; }
}

@keyframes optimistic-action-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .delegate-grid-skeleton span,
  .button[data-optimistic-loading="1"]::after {
    animation: none;
  }
}

.property-active-custom-table thead th[data-property-column] > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}

.property-active-custom-table .sql-column-value {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #33444f;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-column-resize-handle {
  right: 2px;
}

.table-column-manager {
  position: relative;
  z-index: 90;
  width: max-content;
  margin: 0;
  flex: 0 0 auto;
}

.table-column-manager summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #2f3f4b;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 740;
  cursor: pointer;
  list-style: none;
}

.table-column-manager[open] summary,
.table-column-manager summary:hover,
.table-column-manager summary:focus-visible {
  border-color: #b7cad3;
  background: #f3f5f6;
  outline: 0;
}

.table-column-manager summary::-webkit-details-marker {
  display: none;
}

.table-column-manager summary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.table-column-manager-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  max-height: min(72vh, 720px);
  flex-direction: column;
  border: 1px solid #d9e3e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(18, 34, 42, .16);
  padding: 14px;
}

.table-column-manager-panel header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.table-column-manager-panel header strong,
.table-column-manager-panel header span {
  display: block;
}

.table-column-manager-panel header strong {
  color: var(--heading);
  font-size: 14px;
}

.table-column-manager-panel header span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.table-column-manager-panel header .button {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 10px;
  white-space: nowrap;
}

.table-column-manager-list {
  display: grid;
  gap: 7px;
  min-height: 0;
  max-height: min(56vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

.table-column-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #e2e9ee;
  border-radius: 9px;
  background: #fbfdfc;
  padding: 8px;
}

.table-column-option.dragging {
  opacity: .55;
}

.table-column-option.drag-over {
  border-color: #9fb7c2;
  background: #eef4f5;
  box-shadow: inset 4px 0 #103334;
}

.column-drag-grip {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: #f2f6f7;
  color: #7b8a92;
  cursor: grab;
}

.table-column-option.dragging .column-drag-grip,
.column-drag-grip:active {
  cursor: grabbing;
}

.column-drag-grip svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.table-column-option label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #2f3f4b;
  font-size: 13px;
  font-weight: 700;
}

.table-column-option label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-column-option-actions {
  display: flex;
  gap: 5px;
}

.table-column-option .icon-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.table-column-option .icon-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.table-column-option .column-pin-button.active {
  border-color: #b8dec5;
  background: #e8f8ea;
  color: #23683a;
}

.table-column-manager-panel footer {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-top: 12px;
}

.portal-invite-card {
  display: grid;
  gap: 12px;
  margin: 16px 14px;
  border: 1px solid #cfe3f7;
  border-radius: var(--radius-lg);
  background: #eef7ff;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(36, 82, 112, .08);
}

.portal-invite-card > * {
  margin-left: 0;
  margin-right: 0;
}

.portal-invite-card p {
  margin: 0;
}

.portal-invite-card .section-heading {
  align-items: center;
  border-bottom-color: rgba(78, 125, 166, .18);
}

.portal-invite-card .section-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portal-invite-link-label {
  color: var(--body);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}

.portal-invite-card label {
  display: grid;
  gap: 7px;
}

.portal-invite-card input {
  width: 100%;
  border: 1px solid #bfd8ef;
  border-radius: var(--radius-md);
  background: #fff;
  color: #2e3b44;
  padding: 10px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.portal-invite-link-list {
  display: grid;
  gap: 12px;
}

.portal-invite-link-row {
  display: grid;
  gap: 10px;
}

.portal-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.portal-invite-actions .button {
  min-height: 38px;
}

.portal-invite-actions .button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.agreement-drop-row {
  position: relative;
}

.agreement-drop-row td {
  transition: background .16s ease, box-shadow .16s ease;
}

.agreement-drop-row.is-dragging-agreement td {
  background: #eefaf4;
  box-shadow: inset 0 2px 0 #53b96f, inset 0 -2px 0 #53b96f;
}

.agreement-drop-row.is-dragging-agreement td:first-child {
  box-shadow: inset 2px 0 0 #53b96f, inset 0 2px 0 #53b96f, inset 0 -2px 0 #53b96f;
}

.agreement-drop-row.is-dragging-agreement td:last-child {
  box-shadow: inset -2px 0 0 #53b96f, inset 0 2px 0 #53b96f, inset 0 -2px 0 #53b96f;
}

.agreement-pdf-cell {
  overflow: visible !important;
}

.agreement-pdf-content {
  display: inline-grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.agreement-pdf-content > span {
  color: #667885;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.two-line-cell {
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.two-line-cell strong,
.two-line-cell span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.two-line-cell strong {
  color: var(--heading);
  font-size: 13px;
  -webkit-line-clamp: 1;
}

.two-line-cell span {
  min-height: 16px;
  color: #667887;
  font-size: 12px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
}

.compliance-type-cell {
  min-width: 260px;
}

.compliance-status-cell {
  min-width: 190px;
  align-content: center;
}

.compliance-status-cell .badge {
  width: fit-content;
}

.renewals-table {
  min-width: 3800px;
}

.renewals-table .record-control-field {
  min-width: 160px;
  gap: 4px;
}

.renewals-table .record-control-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.renewals-table .field-label select,
.renewals-table .field-label > input,
.renewals-table .field-label textarea {
  min-height: 34px;
  border-radius: 10px;
  font-size: 13px;
  padding: 0 10px;
}

.renewals-table .field-label textarea {
  min-height: 58px;
  padding: 8px 10px;
  resize: vertical;
}

.renewal-rating-cell {
  display: grid;
  gap: 4px;
  min-width: 160px;
}

.renewal-rating-cell > span {
  color: #f59e0b;
  font-size: 12px;
  letter-spacing: 0;
}

.tenancy-renewal-control.tone-normal select {
  background: #edfdf3;
  border-color: #86efac;
  color: #166534;
}

.tenancy-renewal-control.tone-danger select {
  background: #fff1f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.tenancy-renewal-control.tone-warning select {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

.tenancy-renewal-control.tone-minor select {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.tenancy-renewal-control.tone-neutral select {
  background: #f8fafc;
  border-color: var(--border);
  color: #94a3b8;
  font-weight: 500;
}

.renewal-preference-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  border: 1px solid #dbe8e5;
  border-radius: var(--radius-lg);
  background: #f7fbf9;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.renewal-preference-summary strong,
.renewal-preference-summary span {
  display: block;
}

.renewal-preference-summary span {
  color: var(--muted);
  font-size: 13px;
}

.renewal-preference-summary .button {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.renewal-days-pill {
  min-width: 48px;
  min-height: 34px;
  display: inline-grid;
  align-content: center;
  justify-content: center;
  border: 1px solid #d4dde5;
  border-radius: 8px;
  padding: 6px 10px;
}

.renewal-days-pill strong,
.renewal-days-pill em {
  margin: 0;
  display: block;
}

.renewal-days-pill strong {
  color: #24313a;
  font-size: 16px;
  line-height: 1;
}

.renewal-days-pill em {
  color: #5c6b76;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.renewal-days-red {
  border-color: #ffb7b7;
  background: #fff1f1;
}

.renewal-days-red strong,
.renewal-days-red em {
  color: #bd2b2b;
}

.renewal-days-yellow {
  border-color: #ffd577;
  background: #fff8e6;
}

.renewal-days-yellow strong,
.renewal-days-yellow em {
  color: #a76100;
}

.renewal-days-blue {
  border-color: #bfdff8;
  background: #eef8ff;
}

.renewal-days-blue strong,
.renewal-days-blue em {
  color: #246ea8;
}

.renewal-days-periodic {
  border-color: #f4b7cf;
  background: #fff1f7;
}

.renewal-days-periodic strong,
.renewal-days-periodic em {
  color: #a62c64;
}

.renewal-stage-cell {
  display: grid;
  gap: 5px;
  min-width: 190px;
}

.renewal-stage-cell .badge {
  width: fit-content;
}

.renewal-stage-cell span {
  color: #667887;
  font-size: 12px;
}

.renewal-preference-explainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.renewal-preference-explainer div {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #f8fafb;
  padding: 14px;
}

.renewal-preference-explainer strong,
.renewal-preference-explainer span {
  display: block;
}

.renewal-preference-explainer span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.leasing-table {
  min-width: 1180px;
}

.data-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.maintenance-table {
  min-width: 1240px;
  table-layout: fixed;
}

.maintenance-table th:nth-child(1),
.maintenance-table td:nth-child(1) {
  width: 22%;
}

.maintenance-table th:nth-child(2),
.maintenance-table td:nth-child(2) {
  width: 10%;
  min-width: 112px;
}

.maintenance-table th:nth-child(3),
.maintenance-table td:nth-child(3) {
  width: 8%;
}

.maintenance-table th:nth-child(4),
.maintenance-table td:nth-child(4) {
  width: 20%;
}

.maintenance-table th:nth-child(5),
.maintenance-table td:nth-child(5) {
  width: 18%;
  min-width: 190px;
}

.maintenance-table th:nth-child(6),
.maintenance-table td:nth-child(6),
.maintenance-table th:nth-child(7),
.maintenance-table td:nth-child(7),
.maintenance-table th:nth-child(8),
.maintenance-table td:nth-child(8) {
  width: 10%;
  min-width: 112px;
}

.maintenance-table td:nth-child(2) span,
.maintenance-table td:nth-child(8) span {
  white-space: nowrap;
}

.maintenance-financial-table {
  min-width: 1180px;
  table-layout: fixed;
}

.maintenance-financial-table .financial-col-select,
.maintenance-financial-table th.select-cell,
.maintenance-financial-table td.select-cell {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}

.maintenance-financial-table th,
.maintenance-financial-table td,
.maintenance-financial-table .table-link,
.maintenance-financial-table strong,
.maintenance-financial-table span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-financial-table .table-link {
  display: block;
  width: 100%;
}

.maintenance-financial-table .info-tooltip,
.maintenance-financial-table .info-tooltip-icon {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.maintenance-financial-table thead th {
  position: relative;
  height: 42px;
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}

.maintenance-financial-table thead th[data-no-sort="true"] {
  cursor: default;
}

.maintenance-financial-table thead th.select-cell::after,
.maintenance-financial-table thead th[data-no-sort="true"]::after {
  content: none !important;
  display: none;
  margin: 0;
}

.maintenance-financial-table thead th[data-financial-column] {
  padding-right: 24px;
}

.maintenance-financial-table thead th[data-financial-column] > span {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2px;
  min-width: 0;
}

.column-resize-handle {
  position: absolute;
  z-index: 4;
  top: 6px;
  right: 0;
  bottom: 6px;
  width: 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: col-resize;
  padding: 0;
  touch-action: none;
}

.column-resize-handle::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 1px;
  border-radius: 999px;
  background: #d7e0e6;
  opacity: .72;
}

.column-resize-handle:hover::after,
.is-resizing-table-column .column-resize-handle::after {
  background: #103334;
  opacity: 1;
}

.is-resizing-table-column {
  cursor: col-resize;
  user-select: none;
}

.select-cell {
  text-align: center;
}

.table-row-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #103334;
  cursor: pointer;
}

.pdf-thumb-cell {
  overflow: visible !important;
}

.pdf-thumb-trigger {
  width: 42px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b42318;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.pdf-file-icon {
  position: relative;
  width: 30px;
  height: 36px;
  display: grid !important;
  place-items: end center;
  border: 1px solid #f3b2ae;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
  box-shadow: 0 6px 16px rgba(180, 35, 24, .12);
  overflow: hidden;
}

.pdf-file-icon::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-left: 1px solid #f3b2ae;
  border-bottom: 1px solid #f3b2ae;
  background: #ffe0de;
  transform: skew(-8deg, -8deg);
}

.pdf-file-icon i {
  width: 100%;
  background: #d92d20;
  color: #fff;
  padding: 3px 0 2px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
}

.pdf-thumb-empty {
  color: #7b8b97;
  font-size: 10px;
  font-style: normal;
}

.pdf-thumb-trigger:hover {
  transform: translateY(-1px);
}

.pdf-thumb-trigger:hover .pdf-file-icon {
  border-color: #e35d54;
  box-shadow: 0 10px 22px rgba(180, 35, 24, .18);
}

.financial-bulk-bar {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid #c9ddd9;
  border-radius: 6px;
  background: #f6fbfa;
  margin: 0 0 10px;
  padding: 8px;
}

.financial-bulk-bar.active {
  display: flex;
}

.financial-bulk-bar > div {
  display: grid;
  margin-right: auto;
  padding: 0 6px;
}

.financial-bulk-bar strong {
  color: var(--heading);
  font-size: 14px;
}

.financial-bulk-bar span {
  color: #657582;
  font-size: 11px;
}

.financial-bulk-bar select {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #2f3d47;
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
}

.financial-pdf-preview {
  position: fixed;
  z-index: 6000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #c9d8e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(24, 37, 45, .22);
  overflow: hidden;
  pointer-events: none;
}

.financial-pdf-preview header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e2ebef;
  background: #f8fbfc;
  padding: 9px 11px;
}

.financial-pdf-preview strong,
.financial-pdf-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.financial-pdf-preview strong {
  color: var(--heading);
  font-size: 13px;
}

.financial-pdf-preview span {
  color: var(--muted);
  font-size: 11px;
}

.financial-pdf-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #eef3f6;
}

.financial-pdf-preview img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #0f1720;
}

.financial-image-preview {
  background: #0f1720;
}

.priority-photo-cell {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.photo-status {
  color: var(--muted);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  line-height: 1.2;
  white-space: nowrap;
}

.photo-status-normal {
  color: var(--green);
}

.people-suppliers-table {
  min-width: 1220px;
  table-layout: fixed;
}

.people-suppliers-table th:nth-child(1),
.people-suppliers-table td:nth-child(1) {
  width: 18%;
}

.people-suppliers-table th:nth-child(2),
.people-suppliers-table td:nth-child(2) {
  width: 13%;
}

.people-suppliers-table th:nth-child(3),
.people-suppliers-table td:nth-child(3) {
  width: 17%;
}

.people-suppliers-table th:nth-child(4),
.people-suppliers-table td:nth-child(4) {
  width: 13%;
}

.people-suppliers-table th:nth-child(5),
.people-suppliers-table td:nth-child(5) {
  width: 14%;
}

.people-suppliers-table th:nth-child(6),
.people-suppliers-table td:nth-child(6) {
  width: 13%;
}

.people-suppliers-table th:nth-child(7),
.people-suppliers-table td:nth-child(7) {
  width: 12%;
}

.people-suppliers-table td:nth-child(3) {
  word-break: keep-all;
}

.people-tenants-table {
  min-width: 980px;
  table-layout: fixed;
}

.people-tenants-table th:nth-child(1),
.people-tenants-table td:nth-child(1) {
  width: 22%;
}

.people-tenants-table th:nth-child(2),
.people-tenants-table td:nth-child(2) {
  width: 24%;
}

.people-tenants-table th:nth-child(3),
.people-tenants-table td:nth-child(3) {
  width: 16%;
  word-break: keep-all;
}

.people-tenants-table th:nth-child(4),
.people-tenants-table td:nth-child(4) {
  width: 28%;
}

.people-tenants-table th:nth-child(5),
.people-tenants-table td:nth-child(5) {
  width: 10%;
}

.supplier-insurance-cell {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.supplier-insurance-cell span:not(.badge) {
  color: var(--muted);
  font-size: 12px;
}

.table-mini-select {
  height: 34px;
  min-width: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 0 9px;
  font: inherit;
}

.supplier-preferred-select {
  font-weight: 760;
}

.supplier-preferred-select.preferred-grey {
  background: #f2f5f6;
  border-color: #d8e1e4;
  color: #5d6b72;
}

.supplier-preferred-select.preferred-green {
  background: #e3f8e8;
  border-color: #95d8a6;
  color: #176b3a;
}

.supplier-preferred-select.preferred-orange {
  background: #fff0d8;
  border-color: #f0b56a;
  color: #8a4e12;
}

.supplier-preferred-select.preferred-red {
  background: #ffe2e0;
  border-color: #ef9a94;
  color: #9c2f28;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 42px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  color: #64727e;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

td {
  height: 58px;
  border-bottom: 1px solid var(--soft-line);
  color: #33414b;
  padding: 9px 12px;
  vertical-align: middle;
}

td span,
td em {
  display: block;
  margin-top: 3px;
  color: #687784;
  font-size: 12px;
  font-style: normal;
}

.table-link {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.table-link-cell {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.table-link-cell:hover strong {
  color: var(--brand);
}

.table-link strong {
  display: block;
}

.table-link-with-avatar {
  display: inline-grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.table-link-with-avatar > span:not(.user-avatar) {
  display: grid;
  gap: 2px;
}

.table-link-with-avatar em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.user-avatar {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf8f3;
  border: 1px solid rgba(16, 51, 52, .12);
  color: #103334;
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: 0;
}

.user-avatar img,
.activity-avatar img,
.profile-avatar img,
.sidebar-avatar img,
.top-menu-avatar img,
.top-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  font-size: .78em;
  font-weight: 750;
  line-height: 1;
}

.avatar-tone-0 { background: #dff4ee; color: #103334; }
.avatar-tone-1 { background: #e7edf8; color: #244a86; }
.avatar-tone-2 { background: #f4e9fb; color: #653a83; }
.avatar-tone-3 { background: #fff0dc; color: #8a4a05; }
.avatar-tone-4 { background: #e6f2ff; color: #1f5f8c; }
.avatar-tone-5 { background: #ffe8e4; color: #8d3329; }
.avatar-tone-6 { background: #edf4df; color: #476719; }
.avatar-tone-7 { background: #eef0f5; color: #344252; }

.user-avatar-md {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.user-avatar-xl {
  width: 78px;
  height: 78px;
  font-size: 24px;
}

tr:hover {
  background: #f8fbfc;
}

.empty {
  height: 120px;
  text-align: center;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid #cfd8df;
  border-radius: 4px;
  background: #f8fafb;
  color: #60707b;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 600;
}

.badge-urgent {
  border-color: #ffb7b7;
  background: var(--red-bg);
  color: var(--red);
}

.badge-moderate {
  border-color: #ffd978;
  background: #fff7d6;
  color: #9a6200;
}

.badge-minor {
  border-color: #b9d7ff;
  background: #eaf4ff;
  color: #1f5d9c;
}

.badge-important {
  border-color: #ffc76b;
  background: var(--orange-bg);
  color: var(--orange);
}

.badge-normal {
  border-color: #aee2b4;
  background: #eefcf0;
  color: var(--green);
}

.badge-danger {
  border-color: #f3b0a9;
  background: #fff0ee;
  color: #b42318;
}

.badge-dark {
  border-color: #26323d;
  background: #26323d;
  color: #fff;
}

.badge-review {
  border-color: #ffd79b;
  background: #fff4df;
  color: #a15400;
}

.badge-approval {
  border-color: #bdd7ff;
  background: #eef6ff;
  color: #2359a4;
}

.badge-uploaded {
  border-color: #9fd8bd;
  background: #eafaf1;
  color: #18734b;
}

.badge-declined {
  border-color: #f1b7b7;
  background: #fff0f0;
  color: #b32626;
}

.badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.record-workspace,
.entity-workspace {
  max-width: none;
  position: relative;
}

.record-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.record-title h1,
.entity-header h1 {
  margin: 0 0 6px;
  color: var(--heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.record-title p,
.entity-header p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: #778692;
}

.record-title-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-record-workspace {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  position: relative;
}

.compliance-record-workspace {
  grid-template-rows: auto minmax(0, 1fr);
}

.compliance-record-workspace .invoice-record-grid {
  min-height: 0;
}

.invoice-record-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 22px;
  padding-top: 22px;
}

.pdf-shell,
.invoice-side {
  min-width: 0;
  min-height: 0;
}

.pdf-shell {
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #eef2f6;
  overflow: hidden;
}

.pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f4f7fa;
  padding: 0 12px;
}

.pdf-toolbar div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdf-toolbar button,
.pdf-toolbar a,
.pdf-toolbar span,
.pdf-toolbar em {
  min-width: 32px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #52616d;
  font-style: normal;
  text-decoration: none;
}

.pdf-toolbar span {
  border-color: var(--line);
  background: #fff;
  color: var(--heading);
}

.pdf-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
}

.pdf-thumbs {
  display: grid;
  align-content: start;
  gap: 12px;
  border-right: 1px solid var(--line);
  background: #f7f9fb;
  padding: 12px;
  overflow: auto;
}

.pdf-thumbs button,
.pdf-thumbs a {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: #1c5fa9;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  word-break: break-word;
}

.pdf-thumbs button.active,
.pdf-thumbs a.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.pdf-page-wrap {
  min-height: 0;
  overflow: auto;
  padding: 28px;
}

.live-pdf-body {
  min-height: 0;
}

.live-pdf-shell {
  min-height: calc(100vh - 170px);
  display: grid;
  grid-template-rows: 52px minmax(620px, 1fr);
  border: 0;
  border-radius: 0;
  background: #fff;
}

.live-pdf-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.invoice-pdf-object {
  width: 100%;
  height: 100%;
  min-height: 820px;
  display: block;
  border: 0;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: none;
}

.invoice-pdf-fallback-frame {
  width: 100%;
  height: 100%;
  min-height: 820px;
  border: 0;
}

.invoice-pdf-fallback {
  margin: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.invoice-pdf-fallback a {
  color: var(--blue);
  font-weight: 700;
}

.live-pdf-open {
  justify-self: start;
}

.invoice-pdf-page {
  width: min(820px, 100%);
  min-height: 1080px;
  margin: 0 auto;
  background: #fff;
  color: #0f151a;
  box-shadow: 0 1px 8px rgb(15 23 42 / 14%);
  padding: 58px 60px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.25;
}

.invoice-pdf-unavailable {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 520px;
  padding: 48px;
  text-align: center;
  color: #526474;
  background: #f8fafb;
  border: 1px dashed #cfdde5;
  box-shadow: none;
}

.invoice-pdf-unavailable h2 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font);
  font-size: 20px;
}

.invoice-pdf-unavailable p {
  max-width: 440px;
  margin: 0;
  font-family: var(--font);
  line-height: 1.5;
}

.pdf-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: start;
  gap: 24px;
  margin-bottom: 24px;
}

.pdf-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 430px;
  margin: 10px 0 0;
  color: #145dab;
}

.shark-mark {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 8px;
  background: #145dab;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

.pdf-brand strong {
  display: block;
  color: #000;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: .9;
}

.pdf-brand span {
  color: #145dab;
  font-weight: 700;
}

.pdf-address {
  display: grid;
  gap: 12px;
  margin-top: 0;
  text-align: right;
}

.invoice-pdf-page h3 {
  margin: 22px 0 8px;
  font-size: 14px;
  text-transform: uppercase;
}

.invoice-pdf-page p,
.invoice-pdf-page ul {
  margin: 0 0 14px;
}

.invoice-pdf-page ul {
  padding-left: 18px;
}

.invoice-pdf-page table {
  width: 100%;
  margin-top: 22px;
  border-collapse: collapse;
}

.invoice-pdf-page th {
  position: static;
  background: #eee;
  color: #000;
  font-size: 13px;
  text-transform: uppercase;
}

.invoice-pdf-page td,
.invoice-pdf-page th {
  height: auto;
  border: 0;
  padding: 7px 8px;
  text-align: right;
}

.invoice-pdf-page td:first-child,
.invoice-pdf-page th:first-child {
  text-align: left;
}

.pdf-totals {
  width: 260px;
  display: grid;
  gap: 6px;
  margin: 34px 0 80px auto;
}

.pdf-totals div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.pdf-totals dt {
  text-transform: uppercase;
}

.pdf-totals dd {
  margin: 0;
}

.invoice-pdf-page footer {
  display: grid;
  gap: 7px;
  margin-top: 70px;
}

.invoice-side {
  display: block;
  overflow: auto;
  padding-right: 2px;
}

.invoice-match-card {
  margin-bottom: 18px;
}

.invoice-match-card,
.invoice-confirm-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.invoice-match-card {
  overflow: hidden;
}

.invoice-match-card {
  border-color: #a9e1bf;
}

.invoice-match-card.is-unmatched {
  border-color: #f5c96b;
}

.invoice-match-card header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #a9e1bf;
  background: #e7f8ee;
  color: #08783d;
  padding: 12px;
  font-weight: 600;
}

.invoice-match-card.is-unmatched header {
  border-bottom-color: #f5c96b;
  background: #fff4d8;
  color: #9a5a00;
}

.invoice-match-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin: 12px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-sm);
  background: #f8fafb;
  padding: 12px;
}

.invoice-match-summary {
  min-height: 88px;
}

.invoice-match-summary[hidden] {
  display: none;
}

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

.invoice-match-card header .info-tooltip,
.invoice-match-card header .info-tooltip-icon {
  display: inline-grid;
  place-items: center;
}

.info-tooltip-icon {
  display: inline-grid !important;
  place-items: center;
}

.invoice-match-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.invoice-match-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.invoice-match-card span {
  color: #5f6e7b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.invoice-match-card em {
  width: fit-content;
  border: 1px solid #cfd8df;
  border-radius: 5px;
  background: #fff;
  color: #60707d;
  padding: 5px 7px;
  font-size: 12px;
  font-style: normal;
}

.invoice-linked-bill-card {
  border: 1px solid #d9e4eb;
  border-radius: var(--radius-sm);
  background: #f8fafb;
  overflow: hidden;
}

.invoice-linked-bill-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #d9e4eb;
  padding: 10px 12px;
  color: #263744;
  font-size: 13px;
  font-weight: 700;
}

.invoice-linked-bill-button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.invoice-linked-bill-button:hover,
.invoice-linked-bill-button:focus-visible {
  background: #fff;
}

.invoice-linked-bill-button strong,
.invoice-linked-bill-button span,
.invoice-linked-bill-button em {
  display: block;
}

.invoice-linked-bill-button strong {
  color: #172632;
  font-size: 14px;
}

.invoice-linked-bill-button span,
.invoice-linked-bill-button em {
  margin-top: 3px;
  color: #60707d;
  font-size: 12px;
  font-style: normal;
}

.invoice-ai-warning {
  margin: 0;
  border: 1px solid #f3cf84;
  border-radius: 8px;
  background: #fffaf0;
  color: #835400;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.invoice-match-reason {
  margin: 0;
  color: #60707d;
  font-size: 12px;
  line-height: 1.45;
}

.invoice-match-actions button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: #fff;
  color: #44515c;
}

.invoice-match-actions .invoice-unlink-job-button {
  width: auto;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  color: #7a2e2e;
  font-size: 12px;
  font-weight: 600;
}

.invoice-match-actions .invoice-unlink-job-button:hover {
  border-color: #e4b5b5;
  background: #fff7f7;
}

.invoice-link-field {
  display: grid;
  gap: 9px;
  margin: 12px 12px 14px;
  border: 1px solid #dce7ef;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 12px;
}

.invoice-link-label {
  display: grid;
  gap: 2px;
}

.invoice-link-field span,
.invoice-link-label span {
  color: #2d3945;
  font-size: 13px;
  font-weight: 600;
}

.invoice-link-label small {
  color: #71808d;
  font-size: 12px;
  line-height: 1.35;
}

.invoice-relink-search {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #cad9e4;
  border-radius: var(--radius-sm);
  background: #fbfdff;
  padding: 0 10px;
}

.invoice-relink-search svg {
  width: 17px;
  height: 17px;
  color: #728291;
}

.invoice-relink-search input,
.invoice-link-field select {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #1f2c38;
  padding: 8px 0;
  font: inherit;
  outline: 0;
}

.invoice-relink-results {
  display: grid;
  gap: 6px;
  max-height: 224px;
  overflow: auto;
}

.invoice-relink-result {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-sm);
  background: #fbfcfd;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.invoice-relink-result:hover {
  border-color: #94c3e8;
  background: #f2f8ff;
}

.invoice-relink-result strong,
.invoice-relink-result span,
.invoice-relink-result em,
.invoice-relink-result small {
  display: block;
}

.invoice-relink-result span {
  min-width: 0;
}

.invoice-relink-result strong {
  color: #344450;
  font-size: 13px;
  line-height: 1.25;
}

.invoice-relink-result small {
  grid-column: 1 / -1;
  color: #71808d;
  font-size: 12px;
  line-height: 1.3;
}

.invoice-relink-result span small {
  margin-top: 2px;
}

.invoice-relink-result .badge {
  justify-self: end;
  white-space: nowrap;
  font-size: 10px;
  padding: 3px 7px;
}

.invoice-relink-empty,
.invoice-ai-note {
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  font-style: normal;
}

.invoice-confirm-card {
  border-color: #b9d8ff;
}

.invoice-confirm-card > header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #b9d8ff;
  background: #eef6ff;
  color: var(--blue);
  padding: 12px;
  font-weight: 600;
}

.invoice-steps {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--soft-line);
}

.invoice-steps div {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 8px;
  color: #60707d;
}

.invoice-steps span {
  width: 18px;
  height: 18px;
  border: 1px solid #c5d3df;
  border-radius: 50%;
}

.invoice-steps .complete span {
  border-color: #30a36a;
  background: #30a36a;
}

.invoice-steps .active {
  color: var(--heading);
}

.invoice-steps .active span {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 4px #fff;
  background: var(--blue);
}

.invoice-steps .declined {
  color: #aa2e2e;
}

.invoice-steps .declined span {
  border-color: #d74a4a;
  background: #d74a4a;
}

.invoice-form {
  display: grid;
  gap: 13px;
  padding: 14px 12px;
}

.invoice-form label {
  display: grid;
  gap: 6px;
}

.invoice-form span,
.invoice-form legend {
  color: #4f5f6d;
  font-size: 12px;
  font-weight: 600;
}

.invoice-form input,
.invoice-form textarea,
.invoice-form select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  padding: 9px 10px;
  outline: 0;
}

.currency-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.currency-input > span {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 40px;
  border-right: 1px solid var(--line);
  background: #f7fafb;
  color: #263746;
  font-size: 13px;
  font-weight: 700;
}

.currency-input input,
.portal-modal-fields .currency-input input {
  border: 0;
  border-radius: 0;
}

.add-record-search-results {
  margin-top: -6px;
}

.add-record-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #b7dcc8;
  border-radius: var(--radius-sm);
  background: #f2fbf6;
  padding: 10px 12px;
}

.add-record-selected strong,
.add-record-selected span {
  display: block;
}

.add-record-selected strong {
  color: #21343d;
  font-size: 13px;
}

.add-record-selected span {
  flex: 1;
  min-width: 0;
  color: var(--helper-text);
  font-size: var(--helper-size);
}

.add-record-selected button {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: #2f4554;
  padding: 6px 9px;
  font-weight: 700;
  cursor: pointer;
}

.invoice-form textarea {
  min-height: 68px;
  resize: vertical;
}

.invoice-read-pdf-button {
  width: fit-content;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #2f3f54;
  min-height: 44px;
  padding: 0 22px;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(16, 51, 52, 0.05);
}

.invoice-read-pdf-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(105deg, #17bfd7 0%, #3f75ff 34%, #d652b5 66%, #ff7144 100%);
  background-size: 100% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.invoice-read-pdf-button > * {
  position: relative;
  z-index: 1;
}

.invoice-read-pdf-button.is-reading-ai {
  cursor: wait;
  color: #2f3f54;
  box-shadow: 0 9px 22px rgba(23, 191, 215, 0.12), 0 9px 22px rgba(214, 82, 181, 0.1);
}

.invoice-read-pdf-button.is-reading-ai::before {
  background: linear-gradient(
    90deg,
    #17bfd7 0%,
    #3f75ff 15%,
    #d652b5 31%,
    #ff7144 46%,
    #17bfd7 61%,
    #3f75ff 76%,
    #d652b5 90%,
    #ff7144 100%
  );
  background-size: 260% 100%;
  animation: invoice-ai-border-race 3.6s linear infinite, invoice-ai-border-pulse 2.9s ease-in-out infinite;
}

.invoice-read-pdf-button.is-reading-ai::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(23, 191, 215, 0.32), rgba(63, 117, 255, 0.26), rgba(214, 82, 181, 0.24), rgba(255, 113, 68, 0.22), rgba(23, 191, 215, 0.32));
  background-size: 260% 100%;
  filter: blur(7px);
  opacity: 0.4;
  animation: invoice-ai-glow-race 3.6s linear infinite, invoice-ai-outer-pulse 2.9s ease-in-out infinite;
}

.invoice-read-pdf-button.is-reading-ai:disabled {
  opacity: 1;
}

.ai-button-mark {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  color: #3f75ff;
  animation: invoice-ai-mark 2.9s ease-in-out infinite;
}

.invoice-read-pdf-button:not(.is-reading-ai) .ai-button-mark {
  animation: none;
}

.ai-button-mark svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

@keyframes invoice-ai-glow {
  0%, 100% {
    opacity: 0.92;
    filter: drop-shadow(0 0 7px rgba(59, 130, 246, 0.48)) drop-shadow(0 0 12px rgba(236, 72, 153, 0.32));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.7)) drop-shadow(0 0 20px rgba(236, 72, 153, 0.52));
  }
}

@keyframes invoice-ai-border-race {
  0% { background-position: 0% 50%; }
  100% { background-position: 320% 50%; }
}

@keyframes invoice-ai-glow-race {
  0% { background-position: 0% 50%; }
  100% { background-position: 320% 50%; }
}

@keyframes invoice-ai-border-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@keyframes invoice-ai-outer-pulse {
  0%, 100% {
    opacity: 0.34;
    transform: scale(0.99);
  }
  50% {
    opacity: 0.58;
    transform: scale(1.01);
  }
}

@keyframes invoice-ai-mark {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.invoice-ai-note {
  margin: -5px 0 0;
  line-height: 1.45;
}

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

.invoice-form fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.invoice-form fieldset label,
.checkbox-line {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  padding: 7px 10px;
}

.invoice-form input[type="radio"],
.invoice-form input[type="checkbox"] {
  width: auto;
}

.invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--soft-line);
  background: #fff;
  padding: 12px;
}

.record-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.record-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #3f4c57;
  padding: 0;
}

.record-toolbar button.active {
  color: var(--blue);
  font-weight: 600;
}

.record-action-panel {
  position: absolute;
  top: 122px;
  left: 0;
  z-index: 30;
  width: min(680px, calc(100vw - 260px));
  display: grid;
  gap: 12px;
  border: 1px solid #d6e1ea;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 18px 40px rgba(29, 45, 57, 0.14);
  padding: 14px;
}

.record-action-panel.assignee-panel {
  width: min(360px, calc(100vw - 48px));
}

.record-toolbar button[data-record-action="assignee"] {
  border: 1px solid #d7e0e7;
  border-radius: 999px;
  background: #fff;
  padding: 8px 12px;
}

.editable-description {
  cursor: text;
}

.inline-description-editor {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  border: 1px solid #cfdbe5;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  line-height: 1.5;
}

.record-dropdown-panel {
  width: min(360px, calc(100vw - 32px));
  border: 1px solid #d6e1ea;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 16px 34px rgba(29, 45, 57, 0.12);
  padding: 12px;
}

.record-dropdown-head strong,
.record-dropdown-head span {
  display: block;
}

.record-dropdown-head strong {
  color: #273746;
  font-size: 14px;
  font-weight: 600;
}

.record-dropdown-head span {
  margin-top: 3px;
  color: #667887;
  font-size: 12px;
}

.record-select-field {
  display: grid;
  gap: 6px;
}

.record-select-field span {
  color: #526574;
  font-size: 12px;
  font-weight: 600;
}

.record-select-field select {
  width: 100%;
  height: 38px;
  border: 1px solid #cedbe5;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #243342;
  padding: 0 12px;
  font: inherit;
}

.more-menu-list {
  display: grid;
  gap: 4px;
}

.more-menu-list button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #2f3d48;
  padding: 8px 9px;
  text-align: left;
}

.more-menu-list button:hover {
  background: #f4f8fb;
}

.more-menu-list svg {
  width: 17px;
  height: 17px;
  color: #7890a3;
}

.record-action-panel > div:first-child strong,
.record-action-panel > div:first-child span {
  display: block;
}

.record-action-panel > div:first-child span {
  margin-top: 3px;
  color: #667887;
  font-size: 13px;
}

.assignee-list,
.more-action-grid,
.inline-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.assignee-list button,
.more-action-grid button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #2f3d48;
  padding: 9px 10px;
  text-align: left;
}

.assignee-list button.active {
  border-color: #9bd9bd;
  background: #eaf8f3;
}

.assignee-list strong,
.assignee-list em {
  display: block;
}

.assignee-list em {
  margin-top: 2px;
  color: #71808c;
  font-size: 12px;
  font-style: normal;
}

.inline-edit-grid label,
.note-panel label {
  display: grid;
  gap: 6px;
}

.inline-edit-grid span,
.visibility-choice {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.inline-edit-grid input,
.inline-edit-grid select,
.inline-edit-grid textarea,
.note-panel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
}

.inline-edit-grid textarea,
.note-panel textarea {
  min-height: 86px;
  resize: vertical;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.visibility-choice {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
}

.upload-inline input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-inline select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 8px 10px;
}

.live-status {
  margin: -2px 0 12px;
  border: 1px solid #c4dcff;
  border-radius: var(--radius-sm);
  background: #f4f9ff;
  color: var(--blue);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
}

.job-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  overflow: visible;
  padding-top: 22px;
}

.property-record .job-record-grid {
  padding-top: 0;
}

.record-file,
.record-activity,
.workstream,
.entity-card,
.activity-panel {
  min-width: 0;
}

.record-file {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.invoice-match-actions a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
}

.record-file section {
  border-top: 1px solid var(--soft-line);
  padding: 16px 14px;
}

.record-file > section:first-child {
  border-top: 0;
}

.job-assignee-card {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--soft-line);
  padding: 14px;
  background: #fbfcfd;
}

.job-assignee-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.job-assignee-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.job-assignee-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.property-manager-inline {
  padding-left: 10px;
  border-left: 1px solid #e2e9ef;
}

.job-assignee-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe5ec;
  border-radius: 50%;
  overflow: hidden;
  background: #eef5f2;
  color: #20323a;
  font-size: 13px;
  font-weight: 750;
}

.job-assignee-avatar span {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  line-height: 1;
  text-align: center;
  width: 100%;
}

.job-assignee-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-assignee-main div,
.job-assignee-select,
.job-assignee-menu-wrap {
  min-width: 0;
}

.job-assignee-main span,
.job-assignee-select span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.job-assignee-main strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-assignee-main em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-assignee-select {
  display: grid;
  gap: 6px;
}

.job-assignee-menu-wrap {
  position: relative;
  display: grid;
  place-items: start end;
}

.job-assignee-menu-button {
  width: 34px;
  height: 34px;
}

.job-assignee-menu-button svg {
  width: 17px;
  height: 17px;
}

.job-assignee-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 220;
  width: min(280px, calc(100vw - 32px));
  border: 1px solid #d6e1e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(19, 35, 45, 0.16);
  padding: 12px;
}

.job-assignee-select select,
.job-asset-selector select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d7e2ea;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 10px;
}

@media (max-width: 760px) {
  .job-assignee-card-head,
  .job-assignee-people {
    grid-template-columns: 1fr;
  }

  .property-manager-inline {
    border-left: 0;
    border-top: 1px solid #e2e9ef;
    padding-top: 10px;
    padding-left: 0;
  }

  .job-assignee-menu-wrap {
    place-items: stretch;
  }

  .job-assignee-menu-button {
    justify-self: end;
  }
}

.photo-drop {
  width: 100%;
  aspect-ratio: 3 / 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 0;
  background: #f0f3f7;
  color: #4c5a66;
}

.photo-drop em {
  color: #728190;
  font-size: 12px;
  font-style: normal;
}

.property-photo-drop {
  background: #f5f8fb;
}

.photo-frame {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #eef2f5;
}

.photo-frame.is-dragging,
.photo-drop.is-dragging {
  outline: 2px dashed var(--blue);
  outline-offset: -8px;
  background: #eef6ff;
}

.photo-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1.55;
  display: block;
  border: 0;
  background: #edf1f4;
  padding: 0;
  text-align: left;
}

.photo-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo-thumbs,
.photo-lightbox-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.photo-thumbs {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 10px;
}

.photo-thumbs button,
.photo-lightbox-thumbs button {
  flex: 0 0 auto;
  width: 54px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0;
}

.photo-thumbs button[draggable="true"] {
  cursor: grab;
}

.photo-thumbs button[draggable="true"]:active {
  cursor: grabbing;
}

.photo-thumbs button.active,
.photo-lightbox-thumbs button.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}

.photo-thumbs button.is-drop-target {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(76, 181, 99, .22);
}

.photo-thumbs img,
.photo-lightbox-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo-add-thumb {
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
}

.photo-add-thumb svg {
  width: 15px;
  height: 15px;
}

.photo-add-thumb span {
  display: block;
}

.photo-more {
  flex: 0 0 auto;
  color: #52616d;
  font-size: 12px;
  font-weight: 600;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgb(12 22 29 / 72%);
  padding: 24px;
}

.photo-lightbox-panel {
  width: min(1080px, 100%);
  max-height: min(860px, 94vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 18px 60px rgb(12 22 29 / 28%);
}

.photo-lightbox-panel header,
.photo-lightbox-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.photo-lightbox-panel footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.photo-lightbox-panel header strong,
.photo-lightbox-panel header span {
  display: block;
}

.photo-lightbox-panel header span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.photo-lightbox-stage {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
  background: #111b22;
}

.photo-lightbox-stage img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 90%);
  color: var(--heading);
  font-size: 30px;
}

.photo-nav.prev {
  left: 14px;
}

.photo-nav.next {
  right: 14px;
}

.button.danger {
  border-color: #f2b8b5;
  color: #b42318;
  background: #fff7f6;
}

.button.subtle-danger {
  background: #fff;
}

.button.subtle-danger:hover {
  background: #fff7f6;
}

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

.section-heading h2,
.record-file h2,
.workstream h2,
.entity-card h2,
.activity-panel h2 {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: #35424c;
  font-size: 15px;
  line-height: 1.2;
}

.section-heading p {
  margin: 4px 0 0;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  line-height: 1.45;
}

.section-heading button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 600;
}

.section-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portal-eye {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  margin-left: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  line-height: 0;
  vertical-align: middle;
}

.section-actions .portal-eye {
  margin-left: 0;
}

.contact-list .portal-eye {
  width: 26px;
  height: 26px;
  margin-left: auto;
}

.portal-eye svg {
  display: block;
  width: 15px;
  height: 15px;
}

.record-file p {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.muted-line {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.supplier-card {
  margin: 16px 14px;
  border: 0;
  border-radius: 4px;
  background: var(--green-bg);
}

.supplier-card > span,
.property-note-card span {
  display: block;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.supplier-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 6px;
  color: #143e3e;
  font-size: 14px;
}

.supplier-card ul,
.contact-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.supplier-card li,
.contact-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #3d4b56;
  font-size: 13px;
}

.supplier-qbcc-card {
  margin: 16px 14px;
  padding: 14px;
  border: 1px solid #d8e5ee;
  border-radius: var(--radius-md);
  background: #f7fbff;
}

.supplier-qbcc-card .section-heading {
  margin-bottom: 12px;
}

.supplier-qbcc-card .mini-fields {
  margin: 0;
}

.supplier-qbcc-actions {
  margin-top: 12px;
}

.supplier-qbcc-card.is-loading {
  background: #fff;
}

.skeleton-table-rows {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.skeleton-table-rows span,
.supplier-qbcc-card.is-loading .local-intelligence-skeleton span {
  display: block;
  height: 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef3f6 0%, #f8fafb 45%, #eef3f6 90%);
  background-size: 180% 100%;
  animation: skeleton-shimmer 1.1s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-table-rows span,
  .supplier-qbcc-card.is-loading .local-intelligence-skeleton span {
    animation: none;
  }
}

.maintenance-linked-invoices {
  overflow: hidden;
  border: 1px solid #ffc76b;
  border-radius: var(--radius-md);
  background: #fff;
}

.maintenance-linked-invoices > span {
  display: block;
  border-bottom: 1px solid #ffc76b;
  background: #fff3d8;
  color: var(--orange);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.maintenance-linked-invoices h3 {
  margin: 0;
  padding: 12px 12px 0;
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
}

.linked-invoice-list {
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding: 10px 12px 12px;
}

.linked-invoice-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  border: 1px solid #bfe4cf;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--heading);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.linked-invoice-row strong,
.linked-invoice-row span,
.linked-invoice-row em {
  display: block;
}

.linked-invoice-row strong {
  font-size: 14px;
  font-weight: 600;
}

.linked-invoice-row span {
  color: #5c6a75;
  font-size: 13px;
}

.linked-invoice-row em {
  grid-row: 1 / span 2;
  grid-column: 2;
  border-radius: 999px;
  background: #e6f7ed;
  color: #136b3a;
  padding: 5px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.link {
  color: var(--blue);
}

.contact-mail-link,
.contact-message-link.text-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.contact-mail-link:hover,
.contact-message-link.text-link:hover {
  color: #0b5fc6;
}

.record-inline-view-link {
  border: 0;
  background: transparent;
  color: #3d4b56;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.record-inline-view-link:hover,
.record-inline-view-link:focus-visible {
  color: var(--heading);
  text-decoration: underline;
}

.contact-list li > span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.mini-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0 0;
}

.property-mini-fields {
  grid-template-columns: 1fr 1fr;
}

.property-feature-stats {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.property-feature-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #31414c;
}

.property-feature-stats svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
  color: #64737f;
}

.property-feature-stats strong {
  color: var(--heading);
  font-size: inherit;
  font-weight: 750;
}

.property-feature-stats em {
  color: #6a7883;
  font-size: inherit;
  font-style: normal;
  font-weight: 600;
}

.property-map-card .section-heading a {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 600;
}

.property-gnaf-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f6f7f8;
  padding: 16px;
  margin: 14px;
}

.property-gnaf-card .section-heading {
  margin-bottom: 0;
}

.property-gnaf-current {
  display: grid;
  gap: 3px;
  padding: 2px 0;
}

.property-gnaf-current strong {
  color: var(--heading);
  font-size: 16px;
  font-weight: 700;
}

.property-gnaf-current span,
.property-gnaf-current small,
.property-gnaf-warning {
  color: #617181;
  font-size: 12px;
  line-height: 1.45;
}

.property-gnaf-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 2px;
}

.property-gnaf-search .field-label {
  margin: 0;
}

.property-gnaf-search .field-label > span {
  color: #25313d;
  font-size: 13px;
  font-weight: 600;
}

.property-gnaf-search .field-label > input {
  min-height: 42px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}

.property-gnaf-results {
  display: none;
  overflow: hidden;
  border: 1px solid #d8e5f5;
  border-radius: var(--radius-md);
  background: #fff;
}

.property-gnaf-results.is-open {
  display: grid;
}

.property-gnaf-results button {
  display: grid;
  gap: 3px;
  border: 0;
  border-bottom: 1px solid var(--soft-line);
  background: #fff;
  color: var(--heading);
  padding: 10px 12px;
  text-align: left;
}

.property-gnaf-results button:last-child {
  border-bottom: 0;
}

.property-gnaf-results button:hover {
  background: #f6f9fc;
}

.property-gnaf-results button strong,
.property-gnaf-results button span {
  display: block;
}

.property-gnaf-results button strong {
  font-size: 13px;
  font-weight: 650;
}

.property-gnaf-results button span {
  color: #657583;
  font-size: 12px;
}

.property-local-card,
.local-integration-intro,
.local-integration-logs {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.property-local-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  background: #f8fafb;
  box-shadow: 0 10px 26px rgba(20, 35, 48, 0.045);
}

.property-local-card .section-heading p,
.local-integration-intro p {
  margin: 3px 0 0;
  color: #687783;
  font-size: 12px;
  font-weight: 500;
}

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

.local-service-grid div,
.local-alert {
  border: 1px solid #dce6ec;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}

.local-service-grid div {
  position: relative;
  min-height: 48px;
  padding: 8px 10px 8px 36px;
}

.local-service-grid i {
  position: absolute;
  top: 8px;
  left: 10px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 7px;
  background: #edf5f4;
  color: var(--accent);
}

.local-service-grid i svg {
  width: 12px;
  height: 12px;
}

.local-service-grid span,
.local-status-item span,
.local-alert span,
.local-match-list span {
  display: block;
  color: #687783;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

.local-service-grid strong,
.local-alert strong,
.local-match-list strong {
  display: block;
  margin-top: 2px;
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.local-service-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-status-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid #dce6ec;
  border-radius: 12px;
  background: #fff;
}

.local-status-item {
  display: grid;
  grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e7eef2;
  background: #fff;
}

.local-status-item:last-child {
  border-bottom: 0;
}

.local-status-item span {
  display: block;
  color: #687783;
  font-size: 12px;
  font-weight: 650;
}

.local-status-item strong {
  display: block;
  justify-self: end;
  max-width: 100%;
  color: var(--heading);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-status-item.is-moderate strong {
  color: #8b6413;
}

.local-status-item.is-important strong {
  color: #b42318;
}

.local-alert-list,
.local-match-list {
  display: grid;
  gap: 8px;
}

.local-alert {
  border-left: 4px solid #5d9cec;
  background: #f3f8ff;
}

.local-alert.is-high,
.local-alert.is-emergency {
  border-left-color: #e14b4b;
  background: #fff5f5;
}

.local-alert.is-medium {
  border-left-color: #e2a729;
  background: #fffaf0;
}

.local-match-list {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.local-match-list div {
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: #fff;
  padding: 9px 10px;
}

.local-match-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.local-match-strip span {
  border: 1px solid #dce6ec;
  border-radius: 999px;
  background: #fff;
  color: #687783;
  font-size: 11px;
  font-weight: 650;
  padding: 5px 8px;
}

.local-integrations-page {
  display: grid;
  gap: 18px;
}

.local-integration-summary {
  margin-bottom: 0;
}

.local-integration-group {
  display: grid;
  gap: 10px;
}

.local-integration-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.local-integration-card {
  display: grid;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(20, 35, 48, 0.04);
}

.local-integration-card.is-loading span {
  display: block;
  min-height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f5, #f8fafb, #eef2f5);
}

.local-integration-card header,
.local-integration-review {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.local-integration-card header span {
  color: #667684;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.local-integration-card h3 {
  margin: 4px 0 2px;
  color: var(--heading);
  font-size: 16px;
  font-weight: 750;
}

.local-integration-card p {
  margin: 0;
  color: #5f6f7c;
  font-size: 13px;
  line-height: 1.45;
}

.local-integration-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.local-integration-meta span {
  color: #687783;
  font-size: 12px;
}

.local-integration-meta strong {
  color: var(--heading);
  font-weight: 700;
}

.local-integration-review {
  justify-content: flex-start;
  border-radius: 12px;
  background: #fff8e8;
  padding: 9px 10px;
}

.local-integration-review span {
  color: #7c641d;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.local-integration-toggles,
.local-integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.local-integration-toggles .checkbox-line {
  min-height: 34px;
  border: 1px solid #d9e3ea;
  border-radius: 999px;
  background: #f8fafb;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
}

.local-integration-logs {
  padding: 16px;
}

.property-osm-map {
  width: 100%;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #eef4f2;
}

.property-map-loading,
.property-map-fallback {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  padding: 16px;
  text-align: center;
}

.property-map-loading svg {
  color: var(--teal-dark);
}

.property-map-fallback {
  text-decoration: none;
}

.property-map-fallback.muted {
  background: #f8faf9;
}

.property-map-fallback strong,
.property-map-fallback span,
.map-helper {
  display: block;
}

.property-map-fallback strong {
  color: var(--heading);
  font-weight: 650;
}

.property-map-fallback span,
.map-helper {
  color: var(--muted);
  font-size: 12px;
}

.map-helper {
  margin: 9px 0 0;
  line-height: 1.4;
}

.mini-fields dt,
.field-grid dt {
  color: #687784;
  font-size: 12px;
  font-weight: 600;
}

.mini-fields dd,
.field-grid dd {
  margin: 4px 0 0;
  color: #143e3e;
  font-weight: 600;
}

.record-inline-value {
  width: 100%;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  padding: 4px 6px;
  margin: -4px -6px;
  cursor: text;
}

.record-inline-value:hover {
  border-color: #d9e4ec;
  background: #f8fbfd;
}

.record-inline-edit {
  width: 100%;
  min-height: 34px;
  border: 1px solid #bfd0dc;
  border-radius: 10px;
  background: #fff;
  color: #143e3e;
  font: inherit;
  font-weight: 600;
  padding: 6px 8px;
  outline: none;
}

.record-inline-edit:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(13 120 105 / 12%);
}

.opportunity-portfolio-inline {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.opportunity-portfolio-inline span {
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.record-inline-textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.45;
}

.opportunity-commercial-notes {
  width: 100%;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #3f4d59;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
}

.opportunity-commercial-notes:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(13 120 105 / 12%);
}

.opportunity-brand-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f8fafb;
  padding: 12px;
  margin: 12px 0;
}

.opportunity-brand-preview {
  width: 120px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 2px solid var(--opportunity-brand, var(--teal));
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.opportunity-brand-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.opportunity-brand-preview strong {
  color: var(--opportunity-brand, var(--teal));
  font-size: 18px;
}

.opportunity-brand-fields {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.opportunity-colour-field {
  display: grid;
  gap: 6px;
}

.opportunity-colour-field > span {
  color: #25313d;
  font-size: 13px;
  font-weight: 600;
}

.opportunity-colour-field > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
}

.opportunity-colour-field input[type="color"],
.opportunity-colour-field input:not([type="color"]) {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #24313e;
  font-weight: 600;
  padding: 0 10px;
}

.opportunity-colour-field input[type="color"] {
  padding: 3px;
}

.opportunity-contacts-card {
  display: grid;
  gap: 12px;
}

.opportunity-contacts-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.opportunity-contacts-head h3 {
  margin-bottom: 0;
}

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

.opportunity-contact-card {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(13, 120, 105, .14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .72);
  padding: 9px 10px;
}

.opportunity-contact-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.opportunity-contact-top > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.opportunity-contact-card > div strong {
  color: #143e3e;
  font-size: 14px;
  line-height: 1.25;
}

.opportunity-contact-card > span {
  color: #657583;
  font-size: 12px;
  font-weight: 700;
}

.opportunity-contact-card ul {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.opportunity-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opportunity-contact-actions:empty {
  display: none;
}

.opportunity-contact-actions .button {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.opportunity-contact-actions .button svg {
  width: 14px;
  height: 14px;
}

.opportunity-primary-check {
  justify-content: flex-start;
  justify-self: start;
  width: 100%;
  text-align: left;
}

.delegate-opportunities-table {
  min-width: 1180px;
}

.opportunity-linked-table {
  min-width: 760px;
}

.opportunity-linked-table td:first-child strong,
.opportunity-linked-table td:first-child span {
  display: block;
}

.opportunity-linked-table td:first-child span {
  margin-top: 4px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.delegate-opportunities-table th:nth-child(6),
.delegate-opportunities-table td:nth-child(6) {
  min-width: 210px;
}

.delegate-opportunities-table th:nth-child(7),
.delegate-opportunities-table td:nth-child(7) {
  min-width: 180px;
}

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

.inline-check input {
  width: 18px;
  height: 18px;
}

.workstream {
  display: grid;
  align-content: start;
  gap: 18px;
  order: 2;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.record-activity {
  display: grid;
  align-content: start;
  gap: 14px;
  order: 3;
}

.recommendation button {
  width: 100%;
  min-height: 58px;
  border: 1px solid #b9d8ff;
  border-radius: 4px;
  background: #eef6ff;
  color: var(--blue);
  padding: 12px 14px;
  text-align: left;
}

.recommendation span,
.recommendation strong {
  display: block;
}

.recommendation span {
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.status-task {
  border: 1px solid #ffc76b;
  border-radius: 4px;
  background: #fff;
}

.status-task header {
  border-bottom: 1px solid #ffc76b;
  background: #fff3d8;
  color: var(--orange);
  padding: 11px 12px;
  font-weight: 600;
}

.status-task > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
}

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

.status-task span {
  margin-top: 3px;
  color: #6f7d88;
  font-size: 12px;
}

.tenancy-task,
.tenancy-work-task {
  border-color: #ffc76b;
}

.status-task.urgent {
  border-color: #f0a5a5;
}

.status-task.urgent header {
  border-bottom-color: #f0a5a5;
  background: #fff0f0;
  color: var(--red);
}

.status-task.urgent .button.blue {
  border-color: var(--red);
  background: var(--red);
}

.tenancy-task .button,
.tenancy-work-task .button {
  white-space: nowrap;
}

.status-task .stacked-task-body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 12px;
}

.status-task .stacked-task-body > .button {
  width: fit-content;
}

.property-note-card,
.action-picker,
.entity-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  padding: 16px;
}

.record-alert-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin: 0 -34px 0;
  border-bottom: 1px solid var(--yellow-line);
  background: var(--yellow);
  padding: 15px 34px;
}

.record-alert-strip strong,
.record-alert-strip p {
  display: block;
  margin: 0;
}

.record-alert-strip p {
  margin-top: 4px;
  color: #4f5c65;
}

.delegate-opportunity-record .record-alert-strip {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.delegate-client-grid {
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
}

.delegate-client-grid .workstream {
  order: 2;
}

.delegate-client-side-panel {
  margin-top: 18px;
}

.record-side-tabs.client-record-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: column;
}

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

.client-user-row {
  display: grid;
  grid-template-columns: 38px minmax(160px, 1fr) minmax(120px, auto) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 11px 12px;
}

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

.client-user-row span,
.client-user-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.client-user-row .user-avatar .avatar-initials {
  display: grid;
  place-items: center;
  color: inherit;
  font-size: .78em;
  font-weight: 750;
  line-height: 1;
}

.client-user-main,
.client-user-login {
  min-width: 0;
}

.client-user-main strong,
.client-user-main span,
.client-user-main em,
.client-user-login strong,
.client-user-login span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.client-preference-grid {
  margin: 0;
}

.leasing-command-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.leasing-command-strip article {
  border: 1px solid var(--yellow-line);
  border-radius: var(--radius-lg);
  background: var(--yellow);
  padding: 14px 16px;
}

.leasing-command-strip span,
.leasing-command-strip strong {
  display: block;
}

.leasing-command-strip span {
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.leasing-command-strip strong {
  margin-top: 5px;
  color: #2d3b45;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.leasing-stage {
  display: grid;
  gap: 8px;
  min-width: 230px;
}

.table-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.leasing-stage > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.leasing-stage strong,
.leasing-stage span {
  display: block;
}

.leasing-stage strong {
  color: var(--teal);
}

.leasing-stage span {
  color: #4f5c65;
  font-size: 12px;
}

.leasing-stage ol {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leasing-stage li {
  position: relative;
  flex: 1 1 0;
}

.leasing-stage li span {
  height: 7px;
  border-radius: 999px;
  background: #e7edf2;
}

.leasing-stage li.complete span {
  background: #9bd9bd;
}

.leasing-stage li.active span {
  background: var(--blue);
}

.leasing-stage li em {
  position: absolute;
  left: 0;
  top: 12px;
  width: max-content;
  max-width: 150px;
  color: #6b7b88;
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
}

.leasing-stage li.active em {
  opacity: 1;
}

.proposal-builder,
.new-client-form,
.upload-redaction-panel,
.redaction-builder {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  overflow: hidden;
}

.new-client-form,
.upload-redaction-panel {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
}

.proposal-preview,
.proposal-side article,
.redaction-side article,
.pdf-template-canvas {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.proposal-preview,
.pdf-template-canvas {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.proposal-preview header {
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 16px;
}

.proposal-preview h2,
.pdf-template-canvas h2 {
  margin: 4px 0;
  color: var(--heading);
  font-size: 24px;
}

.proposal-preview h3 {
  margin: 18px 0 5px;
  color: var(--heading);
  font-size: 15px;
}

.proposal-preview p {
  color: #44535f;
  margin: 0;
}

.proposal-hero-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 4px;
}

.proposal-hero-band div {
  border: 1px solid #dbe6ee;
  border-radius: var(--radius-md);
  background: #f8fbfd;
  padding: 12px;
}

.proposal-hero-band span,
.proposal-feature-list {
  color: #667887;
  font-size: 13px;
}

.proposal-hero-band strong {
  display: block;
  margin-top: 5px;
  color: var(--heading);
}

.proposal-feature-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.proposal-feature-list li + li {
  margin-top: 5px;
}

.proposal-pricing-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.proposal-pricing-summary div {
  display: grid;
  gap: 5px;
  border: 1px solid #dbe6ee;
  border-radius: var(--radius-md);
  background: #fbfdfc;
  padding: 12px;
}

.proposal-pricing-summary span,
.proposal-pricing-summary em {
  color: #667887;
  font-size: 12px;
}

.proposal-pricing-summary strong {
  color: var(--heading);
  font-size: 22px;
}

.proposal-pricing-summary em {
  font-style: normal;
  line-height: 1.35;
}

.proposal-fee-table {
  display: grid;
  gap: 8px;
}

.proposal-fee-table div {
  display: grid;
  grid-template-columns: minmax(140px, .85fr) minmax(0, 1.35fr) max-content;
  gap: 12px;
  align-items: start;
  border: 1px solid #dbe6ee;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.proposal-fee-table.compact div {
  grid-template-columns: minmax(130px, .8fr) minmax(0, 1fr) max-content;
  padding: 10px 12px;
}

.proposal-fee-table strong,
.proposal-fee-table b {
  color: var(--heading);
}

.proposal-fee-table strong {
  font-size: 14px;
}

.proposal-fee-table span {
  color: #667887;
  font-size: 13px;
  line-height: 1.35;
}

.proposal-fee-table b {
  font-size: 14px;
  text-align: right;
}

.proposal-preview footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--soft-line);
  margin-top: 20px;
  padding-top: 14px;
}

.proposal-builder-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 16px;
  margin-bottom: 14px;
}

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

.proposal-builder-grid label {
  display: grid;
  gap: 6px;
}

.proposal-builder-grid .span-2 {
  grid-column: 1 / -1;
}

.proposal-builder-grid span {
  color: #25313d;
  font-size: 13px;
  font-weight: 600;
}

.proposal-builder-grid input,
.proposal-builder-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #3f4d59;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 12px;
  outline: none;
}

.proposal-currency-field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

.proposal-currency-field b {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: #f7fafc;
  color: #263542;
  font-size: 14px;
  font-weight: 650;
}

.proposal-builder-grid .proposal-currency-field input {
  border: 0;
  border-radius: 0;
}

.proposal-builder-grid .proposal-currency-field input:focus {
  border-color: transparent;
  box-shadow: none;
}

.proposal-builder-grid .proposal-currency-field:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(13 120 105 / 12%);
}

.delegate-opportunity-proposal-grid .proposal-builder-panel,
.delegate-opportunity-proposal-grid .delegate-proposal-preview {
  height: fit-content;
}

.proposal-builder-grid input {
  min-height: 42px;
}

.proposal-builder-grid textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.45;
}

.proposal-builder-grid input:focus,
.proposal-builder-grid textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(13 120 105 / 12%);
}

.proposal-builder-actions {
  margin-top: 12px;
}

.proposal-side,
.redaction-side {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: auto;
}

.proposal-side article,
.redaction-side article {
  padding: 14px;
}

.proposal-side article strong,
.redaction-side article strong {
  display: block;
  margin-top: 4px;
  color: var(--heading);
}

.pipeline-proposal-column {
  border: 0;
  background: transparent;
}

.pipeline-proposal-column .proposal-preview {
  height: 100%;
}

.proposal-tracking-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 14px;
}

.proposal-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.proposal-status-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid #dbe6ee;
  border-radius: var(--radius-md);
  background: #f8fbfd;
  padding: 10px;
}

.proposal-status-grid div.complete {
  border-color: #bde9d6;
  background: #f2fbf6;
}

.proposal-status-grid div.danger {
  border-color: #f2c1bc;
  background: #fff6f5;
}

.proposal-status-grid span {
  color: #667887;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.proposal-status-grid strong {
  color: var(--heading);
  font-size: 12px;
  line-height: 1.35;
}

.proposal-event-list {
  display: grid;
  gap: 8px;
}

.proposal-event-list div {
  border-top: 1px solid var(--soft-line);
  padding-top: 8px;
}

.proposal-event-list strong,
.proposal-event-list span {
  display: block;
}

.proposal-event-list strong {
  color: var(--heading);
  text-transform: capitalize;
}

.proposal-event-list span {
  margin-top: 2px;
  color: #667887;
  font-size: 12px;
}

.proposal-public-shell {
  min-height: 100dvh;
  background: #f7faf9;
  color: var(--text);
}

.proposal-public-top {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 clamp(18px, 5vw, 72px);
}

.proposal-public-top img {
  width: 150px;
  height: auto;
}

.proposal-public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: end;
  gap: clamp(18px, 5vw, 56px);
  padding: clamp(34px, 7vw, 76px) clamp(18px, 5vw, 72px) 26px;
  background: #fff;
}

.proposal-public-hero > div > span,
.proposal-ready-card span,
.proposal-final-card span,
.proposal-flow-intro span,
.proposal-quick-card > span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.proposal-public-hero h1 {
  max-width: 860px;
  margin: 8px 0;
  color: var(--heading);
  font-size: clamp(34px, 6vw, 68px);
  line-height: .98;
}

.proposal-public-hero p {
  max-width: 760px;
  margin: 0;
  color: #50606c;
  font-size: 18px;
}

.proposal-public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.proposal-quick-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #f8fbfd;
  padding: 18px;
}

.proposal-quick-card strong {
  display: block;
  margin-top: 5px;
  color: var(--heading);
  font-size: 20px;
}

.proposal-quick-card dl,
.proposal-public-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.proposal-quick-card div,
.proposal-public-grid dl div {
  border-top: 1px solid var(--soft-line);
  padding-top: 10px;
}

.proposal-quick-card dt,
.proposal-public-grid dt {
  color: #667887;
  font-size: 12px;
  font-weight: 700;
}

.proposal-quick-card dd,
.proposal-public-grid dd {
  margin: 3px 0 0;
  color: var(--heading);
  font-weight: 700;
}

.proposal-flow-shell {
  display: grid;
  gap: 16px;
  padding: 22px clamp(18px, 5vw, 72px) 56px;
}

.proposal-flow-intro {
  max-width: 760px;
  padding: 10px 0 0;
}

.proposal-flow-intro h2 {
  margin: 6px 0;
  color: var(--heading);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.02;
}

.proposal-flow-intro p {
  margin: 0;
  color: #50606c;
  font-size: 16px;
  line-height: 1.45;
}

.proposal-public-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px clamp(18px, 5vw, 72px) 56px;
}

.proposal-public-pricing {
  display: grid;
  gap: 16px;
  padding: 22px clamp(18px, 5vw, 72px) 0;
}

.proposal-public-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 20px;
}

.proposal-public-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 20px;
}

.proposal-pricing-calculator {
  display: grid;
  gap: 16px;
}

.proposal-flow-section {
  display: grid;
  gap: 14px;
}

.proposal-section-marker {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.proposal-section-marker > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #bdded6;
  border-radius: 999px;
  background: #eef9f6;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.proposal-section-marker h2,
.proposal-ready-card h2,
.proposal-final-card h2 {
  margin: 0;
  color: var(--heading);
}

.proposal-section-marker p,
.proposal-ready-card p,
.proposal-final-card p {
  margin: 4px 0 0;
  color: #667887;
  font-size: 14px;
  line-height: 1.42;
}

.proposal-ready-card,
.proposal-final-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid #c9e7dc;
  border-radius: var(--radius-lg);
  background: #f2fbf6;
  padding: 22px;
}

.proposal-final-card {
  background: #fff;
  border-color: var(--line);
}

.proposal-ready-card .proposal-public-actions,
.proposal-final-card .proposal-public-actions {
  margin-top: 0;
  justify-content: flex-end;
}

.proposal-public-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

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

.proposal-pricing-columns h3 {
  margin: 0 0 10px;
  color: var(--heading);
  font-size: 16px;
}

.proposal-public-grid h2 {
  margin: 0 0 12px;
  color: var(--heading);
}

.proposal-public-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proposal-public-steps li {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  padding: 11px;
}

.proposal-public-steps strong,
.proposal-public-steps span {
  display: block;
}

.proposal-public-steps span {
  margin-top: 3px;
  color: #667887;
  font-size: 13px;
}

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

.proposal-breakdown-list div {
  border-top: 1px solid var(--soft-line);
  padding-top: 10px;
}

.proposal-breakdown-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.proposal-breakdown-list strong,
.proposal-breakdown-list span {
  display: block;
}

.proposal-breakdown-list strong {
  color: var(--heading);
}

.proposal-breakdown-list span {
  margin-top: 3px;
  color: #667887;
  font-size: 13px;
  line-height: 1.4;
}

.proposal-input-modal .portal-modal-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proposal-input-modal .span-2 {
  grid-column: 1 / -1;
}

.redaction-builder {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.template-builder-shell {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.template-builder-main {
  max-height: none;
}

.template-list-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.template-list-heading h2 {
  margin: 0;
  color: var(--heading);
  font-size: 20px;
}

.template-list-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.accounts-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.accounts-upload-modal .portal-modal-fields {
  grid-template-columns: 1fr 1fr;
}

.accounts-upload-modal .portal-modal-fields label:last-child {
  grid-column: 1 / -1;
}

.pdf-template-canvas header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 14px;
}

.pdf-template-canvas header > div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.template-metadata-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.template-metadata-grid label,
.redaction-box-controls label {
  display: grid;
  gap: 5px;
}

.template-metadata-grid .span-2 {
  grid-column: span 2;
}

.template-metadata-grid span,
.redaction-box-controls span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.template-metadata-grid input,
.template-metadata-grid select,
.redaction-box-controls input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--heading);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
}

.template-state-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  margin-top: 10px;
  padding: 10px 12px;
}

.template-state-panel strong {
  color: var(--heading);
  font-size: 13px;
}

.template-state-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.template-state-panel label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 5px 8px;
  color: #40505d;
  font-size: 12px;
  font-weight: 650;
}

.template-name-field {
  display: grid;
  gap: 5px;
  min-width: min(420px, 100%);
}

.template-name-field em {
  color: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.template-name-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--heading);
  padding: 10px 11px;
  font: inherit;
  font-size: 20px;
  font-weight: 650;
}

.template-name-field.compact {
  margin: 10px 0;
  min-width: 0;
}

.template-name-field.compact input {
  padding: 8px 9px;
  font-size: 14px;
  font-weight: 600;
}

.template-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 640px));
  gap: 16px;
  padding-top: 16px;
}

.template-upload {
  display: grid;
  gap: 6px;
  border: 1px dashed #b9c7d5;
  border-radius: var(--radius-md);
  background: #f8fbfd;
  margin-top: 14px;
  padding: 12px;
}

.template-upload span,
.template-upload em {
  display: block;
}

.template-upload span {
  color: var(--heading);
  font-weight: 600;
}

.template-upload em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.template-upload input {
  width: 100%;
}

.template-pdf-control {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.template-pdf-control span,
.template-pdf-control em,
.template-pdf-control small {
  grid-column: 1 / -1;
}

.template-pdf-control small {
  color: var(--danger);
  font-size: 12px;
}

.template-pdf-control a {
  color: var(--blue);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.template-page > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.fake-pdf-page {
  position: relative;
  min-height: 720px;
  border: 1px solid #ced8e2;
  background: #fff;
  box-shadow: 0 8px 24px rgba(33, 47, 60, .08);
  padding: 52px;
}

.template-pdf-placeholder {
  position: relative;
  z-index: 1;
}

.fake-pdf-page > strong {
  display: block;
  color: #003b7a;
  font-size: 30px;
}

.fake-pdf-page > p {
  margin: 8px 0 28px;
  color: #4d5c66;
}

.pdf-lines {
  display: grid;
  gap: 12px;
}

.pdf-lines i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #e8edf2;
}

.template-pdf-object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.redaction-box {
  position: absolute;
  display: grid;
  place-items: center;
  border: 2px solid #111827;
  border-radius: 4px;
  background: rgba(17, 24, 39, .84);
  color: #fff;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 3;
}

.redaction-box.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 114, 231, .18);
}

.redaction-box:active {
  cursor: grabbing;
}

.redaction-box i {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .26);
  cursor: nwse-resize;
}

.redaction-box-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.redaction-box-controls label:first-child {
  grid-column: 1 / -1;
}

.template-builder-side article p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.nudge-pad div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.nudge-pad button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.nudge-pad button:first-child,
.nudge-pad button:last-child {
  grid-column: 2;
}

label.template-upload {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

label.template-upload input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 2px;
}

.owner-card {
  background: #eaf8f3;
}

.owner-card .section-heading {
  margin: 0 0 10px;
}

.owner-card h3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
}

.contact-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.owner-card h3 .record-inline-view-link,
.contact-list .record-inline-view-link {
  justify-self: end;
}

.compact-documents {
  margin-top: 0;
}

.property-note-card div {
  margin-top: 12px;
  border-radius: 3px;
  background: #fff9bf;
  padding: 12px;
}

.property-note-card strong {
  display: block;
  margin-top: 5px;
  color: #5d4300;
}

.action-picker div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.action-picker button,
.action-picker a,
.linked-list button,
.linked-list a,
.document-list button,
.message-list button,
.brief-grid button {
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: #32414d;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  text-decoration: none;
}

.tenancy-action-card {
  border-color: #b9d8ff;
  background: #f8fbff;
}

.arrears-action-card {
  border-color: #f0a5a5;
  background: #fffafa;
}

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

.tenancy-action-form label {
  display: grid;
  gap: 6px;
}

.tenancy-action-form span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.tenancy-action-form input,
.tenancy-action-form select,
.tenancy-action-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
}

.tenancy-action-form textarea {
  min-height: 92px;
  resize: vertical;
}

.payment-plan-card {
  border: 1px solid #d8e2eb;
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 14px;
}

.payment-plan-card header,
.payment-plan-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.payment-plan-card header span,
.proposal-preview header span,
.proposal-side article span,
.redaction-side article span,
.pdf-template-canvas header span {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.payment-plan-card header strong {
  display: block;
  margin-top: 4px;
  color: var(--heading);
  font-size: 15px;
}

.payment-plan-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.payment-plan-list.compact {
  margin-top: 10px;
}

.payment-plan-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 9px 10px;
}

.payment-plan-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.portal-payment-plan {
  border-color: #f0a5a5;
  background: #fffafa;
}

.payment-plan-panel .payment-plan-stack,
.tenant-payments-panel .payment-plan-stack,
.owner-payment-plans-panel .payment-plan-stack {
  display: grid;
  gap: 12px;
}

.payment-plan-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 14px;
}

.payment-plan-summary-head strong {
  display: block;
  color: var(--heading);
  font-size: 14px;
}

.payment-plan-summary-head span,
.payment-plan-summary .muted-line {
  color: var(--muted);
  font-size: 12px;
}

.payment-plans-table td strong {
  display: block;
}

.payment-plans-table td span {
  color: var(--muted);
  font-size: 12px;
}

.maintenance-action-menu {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.maintenance-action-menu-head {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid #ffc76b;
  background: #fff3d8;
  color: var(--orange);
  padding: 11px 12px;
}

.maintenance-action-menu-head span,
.maintenance-action-menu-head strong {
  display: block;
}

.maintenance-action-menu-head span {
  font-size: 12px;
  font-weight: 600;
}

.maintenance-action-menu-head strong {
  color: #2d3b45;
  font-size: 14px;
  font-weight: 600;
}

.maintenance-action-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.maintenance-action-options button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #293642;
  padding: 8px 9px;
  text-align: left;
}

.maintenance-action-options button > svg:first-child {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--blue);
  padding: 6px;
}

.maintenance-action-options button.green > svg:first-child {
  background: #eaf8f3;
  color: #14784c;
}

.maintenance-action-options button.amber > svg:first-child {
  background: #fff4dc;
  color: #a96400;
}

.maintenance-action-options button span,
.maintenance-action-options button strong,
.maintenance-action-options button em {
  display: block;
  min-width: 0;
}

.maintenance-action-options button strong {
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
}

.maintenance-action-options button em {
  margin-top: 2px;
  color: #667887;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.maintenance-next-action,
.maintenance-accordion {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.maintenance-next-action {
  overflow: visible;
  border-color: #bfe4d4;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px rgba(33, 48, 58, 0.05);
}

.maintenance-next-action.tone-amber {
  border-color: #ffd68d;
}

.maintenance-next-action.tone-blue {
  border-color: #b7d7f5;
}

.maintenance-next-action.tone-red {
  border-color: #f0b7b7;
}

.maintenance-next-action-head {
  min-height: 62px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #9bd9bd;
  background: #eaf8f3;
  padding: 13px 14px;
}

.maintenance-next-action.tone-amber .maintenance-next-action-head {
  border-bottom-color: #ffc76b;
  background: #fff7e6;
}

.maintenance-next-action.tone-blue .maintenance-next-action-head {
  border-bottom-color: #b7d7f5;
  background: #edf6ff;
}

.maintenance-next-action.tone-red .maintenance-next-action-head {
  border-bottom-color: #f0a9a9;
  background: #fff0f0;
}

.maintenance-next-action-head div,
.maintenance-next-action-head strong,
.maintenance-next-action-head em,
.maintenance-next-action-head small {
  display: block;
  min-width: 0;
}

.maintenance-next-action-head em {
  color: #607083;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.maintenance-next-action-head strong {
  margin-top: 2px;
  color: var(--heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.maintenance-next-action-head small {
  margin-top: 3px;
  color: #5d6f8c;
  font-size: 12px;
  font-weight: 500;
}

.maintenance-next-action-head .button {
  min-height: 36px;
  white-space: nowrap;
}

.maintenance-next-action-head .maintenance-next-action-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maintenance-next-action-head .maintenance-workflow-menu-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.maintenance-workflow-menu-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #6f7b86;
  border-radius: 999px;
  background: #fff;
  color: #2f3a43;
  cursor: pointer;
  font-family: inherit;
}

.maintenance-workflow-menu-button:hover,
.maintenance-workflow-menu-button[aria-expanded="true"] {
  border-color: #b9c8d3;
  background: #f4f7f9;
}

.maintenance-workflow-menu-button svg {
  width: 18px;
  height: 18px;
}

.maintenance-workflow-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  width: min(254px, calc(100vw - 32px));
  display: grid;
  gap: 0;
  border: 1px solid #d6e1e8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(19, 35, 45, 0.16);
  padding: 0;
}

.maintenance-next-action-head .maintenance-workflow-menu {
  display: grid;
}

.maintenance-next-action.maintenance-workflow-card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 21px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-family: inherit;
}

.maintenance-next-action.maintenance-workflow-card button,
.maintenance-next-action.maintenance-workflow-card input,
.maintenance-next-action.maintenance-workflow-card select,
.maintenance-next-action.maintenance-workflow-card textarea {
  font-family: inherit;
}

.maintenance-stage-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}

.maintenance-stage-strip span {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #d9e3ea;
  border-radius: 999px;
  background: #fff;
  color: #657583;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.maintenance-stage-strip span.is-done {
  border-color: #bfe4d4;
  background: #eefaf3;
  color: #1b744d;
}

.maintenance-stage-strip span.is-current {
  border-color: #ffc76b;
  background: #fff3d8;
  color: var(--orange);
}

.maintenance-action-choice-box {
  overflow: visible;
  border: 1px solid #d9e3ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 51, 52, 0.05);
}

.maintenance-action-choice-box.tone-red {
  border-color: #f0b7b7;
  background: #fff8f8;
}

.maintenance-waiting-box,
.maintenance-property-notes {
  border: 1px solid #d9e3ea;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: none;
}

.maintenance-waiting-box {
  overflow: visible;
  position: relative;
  z-index: 3;
}

.maintenance-property-notes {
  overflow: hidden;
}

.maintenance-action-choice-box > header {
  border-bottom: 1px solid #e5edf2;
  background: #f8fafb;
  color: #20313d;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.maintenance-action-choice-box.tone-red > header {
  border-bottom-color: #f4cdcd;
  background: #fff0f0;
  color: #7d2a2a;
}

.maintenance-action-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
}

.maintenance-action-choice-grid button {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  border: 1px solid #d9e3ea;
  border-radius: 8px;
  background: #fff;
  color: #243746;
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.maintenance-action-choice-grid button:hover,
.maintenance-action-choice-grid button:focus-visible {
  border-color: #b8c8d4;
  background: #f7fafb;
  box-shadow: 0 0 0 3px rgba(16, 51, 52, 0.06);
  outline: none;
}

.maintenance-action-choice-grid button.is-selected {
  border-color: #95cabb;
  background: #f1faf6;
  box-shadow: inset 3px 0 0 #43a87d;
}

.maintenance-action-choice-grid svg {
  width: 19px;
  height: 19px;
  color: #4d6978;
}

.maintenance-action-choice-grid span,
.maintenance-action-choice-grid em {
  display: block;
  min-width: 0;
}

.maintenance-action-choice-grid span {
  color: #223543;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.maintenance-action-choice-grid em {
  grid-column: 2;
  margin-top: 2px;
  color: #6a7886;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.maintenance-waiting-box {
  border-color: #ffc76b;
}

.maintenance-waiting-box > header {
  border-bottom: 1px solid #ffc76b;
  background: #fff3d8;
  color: var(--orange);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.maintenance-status-list {
  display: grid;
  gap: 0;
  padding: 12px;
}

.maintenance-status-footer {
  border-top: 1px solid var(--soft-line);
  background: #fbfcfd;
  color: #667686;
  padding: 9px 12px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.maintenance-status-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 6px;
  margin-bottom: 6px;
}

.maintenance-status-row:focus-within,
.maintenance-status-row:has(.maintenance-workflow-menu),
.quote-list-item:focus-within,
.quote-list-item:has(.quote-action-menu) {
  z-index: 20;
}

.maintenance-status-row.has-document {
  grid-template-columns: minmax(0, 1fr) 42px 46px;
}

.maintenance-status-row:last-child {
  margin-bottom: 0;
}

.maintenance-status-main {
  min-height: 58px;
  display: grid;
  gap: 3px;
  align-content: center;
  border: 0;
  border-radius: 6px;
  background: #f2f5f9;
  color: #33424f;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.maintenance-status-main:hover,
.maintenance-status-main:focus-visible {
  background: #e9f0f7;
  outline: none;
}

.maintenance-status-main strong,
.maintenance-status-main span,
.maintenance-status-main em {
  display: block;
  min-width: 0;
}

.maintenance-status-main strong {
  color: #2b3845;
  font-size: 14px;
  font-weight: 600;
}

.maintenance-status-main span,
.maintenance-status-main em {
  color: #667686;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.maintenance-status-row .maintenance-workflow-menu-wrap {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #f2f5f9;
}

.maintenance-status-row .maintenance-workflow-menu-button {
  width: 36px;
  height: 36px;
  border: 1px solid #6f7b86;
  border-radius: 999px;
  background: #fff;
  color: #2f3a43;
}

.maintenance-status-row .maintenance-workflow-menu-button:hover,
.maintenance-status-row .maintenance-workflow-menu-button[aria-expanded="true"] {
  border-color: #4f5b66;
  background: #f5f7f9;
}

.maintenance-status-row .maintenance-workflow-menu {
  top: calc(100% + 6px);
  right: 0;
  width: min(254px, calc(100vw - 40px));
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(18, 31, 43, .18);
}

.maintenance-status-pdf {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #d5e0e8;
  border-radius: 6px;
  background: #fff;
  color: #33424f;
  text-decoration: none;
}

.maintenance-status-pdf:hover,
.maintenance-status-pdf:focus-visible {
  border-color: #b7c7d4;
  background: #f7fafc;
  outline: none;
}

.maintenance-selected-action-form {
  border: 1px solid #d9e4ec;
  border-radius: 6px;
  background: #fff;
}

.maintenance-property-notes {
  border-color: #ffc76b;
}

.maintenance-property-notes > header {
  border-bottom: 1px solid #ffc76b;
  background: #fff3d8;
  color: var(--orange);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 600;
}

.maintenance-property-notes .maintenance-property-note,
.maintenance-property-notes .maintenance-owner-note {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--soft-line);
  border-radius: 0;
  background: #fff;
  padding: 12px;
}

.maintenance-property-notes > header + .maintenance-property-note {
  border-top: 0;
}

.maintenance-property-notes .maintenance-property-note span,
.maintenance-property-notes .maintenance-owner-note span {
  display: block;
  margin-bottom: 3px;
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.maintenance-property-notes .maintenance-property-note p,
.maintenance-property-notes .maintenance-owner-note p {
  margin: 0;
  color: #6f7d88;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.status-task.maintenance-property-note {
  margin: 0;
  padding: 0;
}

.maintenance-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.maintenance-inline-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #d5e0e8;
  border-radius: 6px;
  background: #fff;
  color: #33424f;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.maintenance-inline-actions button.is-active {
  border-color: #64116f;
  background: #faf6fb;
  color: #64116f;
}

.maintenance-inline-actions svg {
  width: 16px;
  height: 16px;
}

.maintenance-inline-actions em {
  display: none;
}

.maintenance-workflow-menu button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #edf1f4;
  border-radius: 0;
  background: transparent;
  color: #243442;
  padding: 9px 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.maintenance-workflow-menu button:last-child {
  border-bottom: 0;
}

.maintenance-workflow-menu button:hover,
.maintenance-workflow-menu button:focus-visible {
  background: #f2f6f8;
  outline: none;
}

.maintenance-workflow-menu span,
.maintenance-workflow-menu em {
  display: block;
}

.maintenance-workflow-menu span {
  font-size: 14px;
  font-weight: 500;
}

.maintenance-workflow-menu em {
  display: none;
}

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

.maintenance-choice-row label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dce7ef;
  border-radius: 999px;
  background: #fff;
  color: #344350;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

.maintenance-accordion-head {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #9bd9bd;
  background: #eaf8f3;
  color: #26333f;
  padding: 11px 12px;
  text-align: left;
}

.maintenance-accordion.tone-amber .maintenance-accordion-head {
  border-bottom-color: #ffc76b;
  background: #fff7e6;
}

.maintenance-accordion.tone-blue .maintenance-accordion-head {
  border-bottom-color: #b7d7f5;
  background: #edf6ff;
}

.accordion-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #31404d;
}

.maintenance-accordion-head span,
.maintenance-accordion-head strong,
.maintenance-accordion-head em {
  display: block;
}

.maintenance-accordion-head strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.maintenance-accordion-head em {
  margin-top: 2px;
  color: #5d6f8c;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.maintenance-accordion.tone-amber .maintenance-accordion-head > svg:last-child {
  color: #bd7a17;
}

.maintenance-accordion.tone-green .maintenance-accordion-head > svg:last-child {
  color: #e33232;
}

.maintenance-accordion-body {
  padding: 12px;
}

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

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

.field-label {
  display: grid;
  gap: 6px;
}

.field-label > span {
  color: #25313d;
  font-size: 13px;
  font-weight: 600;
}

.record-control-field > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}

.record-control-field > span .info-tooltip {
  margin-left: 0;
}

.record-control-field textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--heading);
  font: inherit;
  font-weight: 500;
  line-height: 1.45;
  padding: 12px 14px;
  resize: vertical;
}

.record-control-field textarea::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.signups-table .record-control-field,
.tenancy-signup-record-table .record-control-field {
  min-width: 150px;
  gap: 4px;
}

.signups-table .record-control-field > span,
.tenancy-signup-record-table .record-control-field > span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}

.signups-table .field-label select,
.signups-table .field-label > input,
.tenancy-signup-record-table .field-label select,
.tenancy-signup-record-table .field-label > input {
  min-height: 34px;
  border-radius: 10px;
  font-size: 13px;
  padding: 0 10px;
}

.tenancy-signup-control.tone-normal select {
  background: #edfdf3;
  border-color: #86efac;
  color: #166534;
}

.tenancy-signup-control.tone-danger select {
  background: #fff1f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.tenancy-signup-control.tone-warning select {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

.tenancy-signup-control.tone-minor select {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.tenancy-signup-control.tone-neutral select {
  background: #f8fafc;
  border-color: var(--border);
  color: #94a3b8;
  font-weight: 500;
}

.tenancy-upload-cell {
  align-items: flex-start;
  min-width: 150px;
}

.tenancy-upload-cell > span:last-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.signup-suffixed-control {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: end;
  gap: 6px;
}

.signup-suffixed-control > em {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.field-label textarea,
.field-label select,
.field-label > input,
.icon-input,
.money-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #24313e;
}

.field-label textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px 12px;
  outline: 0;
  font-size: 14px;
}

.field-label select,
.field-label > input {
  min-height: 42px;
  padding: 0 12px;
  outline: 0;
  font-size: 14px;
  font-weight: 600;
}

.record-control-field.opportunity-control-select select {
  border-width: 1px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.record-control-field.opportunity-control-select.tone-cold select,
.record-control-field.opportunity-control-select.tone-blue select {
  border-color: #b9d5ff;
  background: #eef6ff;
  color: #1d4f91;
}

.record-control-field.opportunity-control-select.tone-warm select,
.record-control-field.opportunity-control-select.tone-amber select {
  border-color: #ffd89a;
  background: #fff7e8;
  color: #9a5b00;
}

.record-control-field.opportunity-control-select.tone-hot select,
.record-control-field.opportunity-control-select.tone-red select {
  border-color: #ffc4bd;
  background: #fff0ee;
  color: #a42318;
}

.record-control-field.opportunity-control-select.tone-green select {
  border-color: #b8e7cb;
  background: #edf9f2;
  color: #14743d;
}

.record-control-field.opportunity-control-select.tone-neutral select {
  border-color: #d4dee7;
  background: #f8fafc;
  color: #344250;
}

.field-label select,
.profile-form select,
.email-form select {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.field-label select.select-placeholder,
.profile-form select.select-placeholder,
.email-form select.select-placeholder {
  background: #f7f9fa;
  border-color: #dde6eb;
  color: #8a98a6;
  font-weight: 500;
}

.field-label select option[value=""],
.profile-form select option[value=""],
.email-form select option[value=""] {
  color: #99a6b2;
  font-weight: 400;
}

.field-label select.select-tone-green,
.profile-form select.select-tone-green,
.email-form select.select-tone-green {
  background: #f0fbf3;
  border-color: #b8e2c1;
  color: #23683a;
}

.field-label select.select-tone-red,
.profile-form select.select-tone-red,
.email-form select.select-tone-red {
  background: #fff0ee;
  border-color: #f3b0a9;
  color: #b42318;
}

.field-label select.select-tone-amber,
.profile-form select.select-tone-amber,
.email-form select.select-tone-amber {
  background: #fff8e6;
  border-color: #f4d58a;
  color: #8a5b00;
}

.field-label select.select-tone-neutral,
.profile-form select.select-tone-neutral,
.email-form select.select-tone-neutral {
  background: #fff;
  border-color: var(--line);
  color: #24313e;
}

.field-label input::placeholder,
.profile-form input::placeholder,
.email-form input::placeholder,
.field-label textarea::placeholder,
.profile-form textarea::placeholder,
.email-form textarea::placeholder {
  color: #9ba8b4;
  font-weight: 400;
}

.quote-file-field .quote-file-input {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  color: #5f7080;
  font-weight: 500;
}

.quote-file-field .quote-file-input::file-selector-button {
  min-height: 34px;
  margin: 0 12px 0 0;
  border: 1px solid #cbd8e3;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #25313d;
  font: inherit;
  font-weight: 600;
  padding: 0 13px;
}

.quote-file-field .quote-file-input::-webkit-file-upload-button {
  min-height: 34px;
  margin: 0 12px 0 0;
  border: 1px solid #cbd8e3;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #25313d;
  font: inherit;
  font-weight: 600;
  padding: 0 13px;
}

.supplier-confirmation-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.supplier-confirmation-field.confirmation-amber select {
  border-color: #ffd68d;
  background: #fff9ed;
}

.supplier-confirmation-field.confirmation-green select {
  border-color: #9bd9bd;
  background: #f0fbf5;
}

.supplier-confirmation-field.confirmation-red select {
  border-color: #f0a9a9;
  background: #fff3f3;
}

.supplier-confirmation-supplier {
  grid-template-columns: minmax(0, 1fr) 32px;
}

.supplier-confirmation-supplier .portal-eye {
  width: 30px;
  height: 30px;
}

.icon-input {
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 11px;
}

.maintenance-form-grid .icon-input {
  grid-template-columns: minmax(0, 1fr) 22px;
}

.icon-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #24313e;
  font-size: 14px;
}

.icon-input svg {
  color: #64768a;
}

.supplier-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.round-tool {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f8fafc;
  color: #607286;
}

.round-tool.danger {
  color: #e13030;
}

.money-input {
  min-height: 42px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  overflow: hidden;
}

.money-input strong {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: #f6f9fc;
  color: #24313e;
  font-size: 14px;
}

.money-input input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #24313e;
  padding: 0 12px;
  font-size: 14px;
}

.action-helper,
.empty-selection {
  margin: 0;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  line-height: 1.45;
}

.quote-empty-helper {
  margin: 0;
  line-height: 1.45;
}

.maintenance-card-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  border: 1px solid #d8e6ef;
  border-radius: 6px;
  background: #f8fbfc;
  color: #435666;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.maintenance-card-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #577287;
  margin-top: 1px;
}

.primary-action {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: #06356d;
  color: #fff;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
}

.primary-action svg {
  width: 18px;
  height: 18px;
}

.activity-email-link {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d5e2ea;
  border-radius: 7px;
  background: #fff;
  color: #0d2829;
  margin-top: 8px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.activity-email-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.activity-email-row .activity-email-link {
  margin-top: 0;
}

.activity-email-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #edf8f2;
  color: #2f7447;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.activity-email-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.activity-email-status.sent {
  background: #edf8f2;
  color: #2f7447;
}

.activity-email-status.delivered {
  background: #e9f7ef;
  color: #247a46;
}

.activity-email-status.opened,
.activity-email-status.clicked {
  background: #eaf4ff;
  color: #2467a8;
}

.activity-email-status.bounced {
  background: #fff0ef;
  color: #b33d34;
}

.activity-email-row em {
  color: var(--helper-text);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--helper-weight);
}

.activity-email-link svg {
  width: 14px;
  height: 14px;
}

.email-preview-modal {
  max-width: 760px;
}

.email-preview-frame {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 18px;
}

.email-preview-frame pre {
  white-space: pre-wrap;
  margin: 0;
  font: inherit;
}

.quote-stack {
  display: grid;
  gap: 12px;
  overflow: visible;
}

.quote-list {
  display: grid;
  gap: 8px;
  overflow: visible;
}

.quote-list.compact {
  gap: 7px;
}

.quote-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-toolbar .button.is-active {
  border-color: #9acfc6;
  background: #effaf7;
  color: #103334;
}

.quote-manual-entry {
  display: grid;
  gap: 12px;
  border: 1px solid #d7e4ec;
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 12px;
}

.quote-list-item {
  display: grid;
  gap: 10px;
  overflow: visible;
  position: relative;
}

.quote-row-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  overflow: visible;
  position: relative;
}

.quote-row {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  padding: 8px 10px;
  text-align: left;
  cursor: default;
  font-family: inherit;
}

.quote-row.selected {
  border-color: var(--blue);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--blue);
}

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

.quote-row strong {
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.quote-row span {
  margin-top: 2px;
  color: #5d6f8c;
  font-size: 11px;
  font-weight: 500;
}

.quote-row .badge {
  display: inline-flex;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
  font-size: 11px;
}

.quote-row em {
  width: fit-content;
  border: 1px solid #ffd372;
  border-radius: 7px;
  background: #fff8e3;
  color: #b64d00;
  padding: 6px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.quote-row small {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.quote-row i {
  display: grid;
  place-items: center;
  color: #607286;
  transition: transform 0.18s ease;
}

.quote-row i svg {
  width: 16px;
  height: 16px;
}

.quote-row:not(.selected) i {
  transform: rotate(180deg);
}

.quote-row-static:hover {
  background: #fff;
}

.quote-row button {
  width: 54px;
  height: 54px;
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #344350;
}

.quote-action-menu-wrap {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  z-index: 4;
}

.quote-action-menu-button,
.quote-delete-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #6f7b86;
  border-radius: 999px;
  background: #fff;
  color: #2f3a43;
  cursor: pointer;
  font-family: inherit;
}

.quote-action-menu-button:hover,
.quote-action-menu-button[aria-expanded="true"] {
  border-color: #4f5b66;
  background: #f5f7f9;
}

.quote-action-menu-button svg {
  width: 18px;
  height: 18px;
}

.quote-action-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  width: min(220px, calc(100vw - 32px));
  display: grid;
  gap: 4px;
  border: 1px solid #d6e1e8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(19, 35, 45, 0.16);
  padding: 6px;
}

.quote-action-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #243442;
  padding: 9px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.quote-action-menu button:hover,
.quote-action-menu button:focus-visible {
  background: #f2f6f8;
  outline: none;
}

.quote-action-menu button.danger {
  color: #9b1f2b;
}

.supplier-completion-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-completion-actions .button,
.supplier-completion-actions .primary-action {
  min-height: 38px;
}

.quote-row-pdf-thumb {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d5e0e7;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.quote-row-pdf-thumb:hover,
.quote-row-pdf-thumb:focus-visible {
  border-color: #b7c7d3;
  box-shadow: 0 0 0 3px rgba(15, 44, 49, 0.08);
  outline: none;
}

.quote-action-menu button.danger:hover,
.quote-action-menu button.danger:focus-visible {
  background: #fff0f2;
}

.quote-delete-button {
  color: #7b2633;
}

.quote-delete-button:hover {
  border-color: #f0b9c1;
  background: #fff6f7;
}

.quote-delete-button svg {
  width: 17px;
  height: 17px;
}

.record-loading-grid {
  align-items: stretch;
}

.record-loading-panel {
  min-height: 360px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.record-loading-block {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #f2f5f7 0%, #fafbfc 44%, #eef2f4 100%);
  background-size: 220% 100%;
  animation: record-loading-pulse 1.2s ease-in-out infinite;
}

.record-loading-block.large {
  height: 180px;
}

.record-loading-block.heading {
  width: 58%;
  height: 28px;
}

.record-loading-block.short {
  width: 72%;
}

@keyframes record-loading-pulse {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.quote-supplier-picker {
  display: grid;
  gap: 10px;
}

.quote-selected-suppliers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-selected-suppliers span {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  min-height: 44px;
  border: 1px solid #bfd7d4;
  border-radius: var(--radius-md);
  background: #f4fbfa;
  color: #173334;
  padding: 7px 8px 7px 10px;
}

.quote-selected-suppliers strong,
.quote-selected-suppliers em {
  display: block;
  min-width: 0;
}

.quote-selected-suppliers strong {
  font-size: 13px;
  line-height: 1.2;
}

.quote-selected-suppliers em {
  color: #607674;
  font-size: 11px;
  font-style: normal;
}

.quote-selected-suppliers button {
  width: 24px;
  height: 24px;
  border: 1px solid #bfd7d4;
  border-radius: 999px;
  background: #fff;
  color: #103334;
  font-weight: 700;
}

.quote-supplier-results {
  display: grid;
  gap: 8px;
  max-height: 250px;
  overflow: auto;
}

.quote-supplier-results button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
  gap: 4px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
}

.quote-supplier-results strong,
.quote-supplier-results span,
.quote-supplier-results em {
  display: block;
  min-width: 0;
}

.quote-supplier-results strong {
  color: var(--heading);
  font-size: 14px;
}

.quote-supplier-results span {
  color: #657584;
  font-size: 12px;
  font-weight: 600;
}

.quote-supplier-results em {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #607674;
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.quote-review-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border: 1px solid #bfe4d4;
  border-radius: var(--radius-lg);
  background: #f7fcfa;
  padding: 12px;
}

.quote-preview,
.quote-decision-panel {
  display: grid;
  gap: 10px;
}

.quote-preview header {
  display: grid;
  gap: 2px;
}

.quote-preview header span,
.quote-preview header em {
  color: #607083;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.quote-preview header strong {
  color: var(--heading);
  font-size: 16px;
}

.quote-paper {
  border: 1px solid #d8e5ec;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.quote-paper h4 {
  margin: 0 0 8px;
  color: var(--heading);
  font-size: 15px;
}

.quote-paper p {
  margin: 0 0 10px;
  color: #485967;
  font-size: 13px;
  line-height: 1.4;
}

.quote-paper dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.quote-paper div {
  display: grid;
  gap: 3px;
}

.quote-paper dt {
  color: #667887;
  font-size: 12px;
  font-weight: 700;
}

.quote-paper dd {
  margin: 0;
  color: var(--heading);
  font-size: 12px;
  font-weight: 600;
}

.quote-decision-panel {
  align-content: start;
  border: 1px solid #d8e5ec;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.quote-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-decision-actions .button,
.quote-decision-actions .primary-action {
  min-height: 38px;
}

.activity-panel {
  background: transparent;
  padding: 0;
}

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

.activity-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 8px;
  margin-bottom: 10px;
}

.activity-comment-composer {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 10px;
  margin-bottom: 12px;
}

.comment-recipient-row label {
  display: grid;
  gap: 5px;
  color: #5f6f7b;
  font-size: 12px;
  font-weight: 650;
}

.comment-recipient-row select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  color: var(--heading);
  padding: 0 10px;
  font: inherit;
}

.comment-audience-fieldset {
  display: grid;
  gap: 8px;
  border: 1px solid #d9e5ed;
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 10px;
}

.comment-audience-fieldset legend {
  color: #5f6f7b;
  font-size: 12px;
  font-weight: 700;
  padding: 0 4px;
}

.comment-audience-fieldset > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.comment-audience-fieldset label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #d5e1ea;
  border-radius: 999px;
  background: #fff;
  color: #294352;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
}

.comment-audience-fieldset span {
  color: #758493;
  font-size: 12px;
  font-weight: 650;
}

.activity-composer-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.activity-composer-row textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  outline: 0;
  background: #fbfcfd;
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}

.comment-mention-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border: 1px solid #d9e5ed;
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 8px;
  color: #758493;
  font-size: 11px;
  font-weight: 700;
}

.comment-mention-row[hidden],
.comment-mention-row button[hidden] {
  display: none;
}

.comment-mention-row button {
  border: 1px solid #d5e1ea;
  border-radius: 999px;
  background: #f8fbfc;
  color: #294352;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 650;
}

.comment-mention-row button:hover {
  border-color: var(--teal);
  background: #edf9f7;
  color: var(--teal);
}

.activity-composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.activity-composer-actions label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5f6f7b;
  font-size: 12px;
  font-weight: 600;
}

.activity-search {
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #83909c;
  padding: 0 10px;
}

.activity-search input,
.activity-tools select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.activity-tools select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 0 10px;
}

.activity-list {
  display: grid;
}

.activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--soft-line);
}

.activity-item.pinned {
  border: 1px solid #b9d8ff;
  border-radius: var(--radius-md);
  background: #f7fbff;
  padding: 12px;
  margin-bottom: 8px;
}

.activity-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.activity-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  align-self: start;
  border-radius: 50%;
  background: #eef2f5;
  color: #50606c;
  font-size: 11px;
  font-weight: 600;
}

.activity-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.activity-avatar.system {
  border: 1px solid #dbe6ee;
  background: #fff;
  padding: 5px;
}

.activity-pin {
  min-width: 28px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #667887;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
}

.activity-pin svg {
  width: 11px;
  height: 11px;
}

.activity-pin.active {
  border-color: var(--blue);
  background: #eef6ff;
  color: var(--blue);
}

.activity-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: start;
}

.activity-edit {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #667887;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 700;
}

.activity-item strong,
.activity-item p {
  display: block;
  margin: 0;
}

.activity-item p {
  margin-top: 3px;
  color: #71808c;
  font-size: 12px;
}

.empty-activity {
  margin: 10px 0 0;
  color: #71808c;
}

.record-side-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.record-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f6f8fa;
  padding: 4px;
}

.record-side-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5e6c78;
  font-weight: 600;
}

.record-side-tabs button.active {
  background: #fff;
  color: var(--heading);
  box-shadow: 0 1px 3px rgb(16 24 40 / 10%);
}

.document-feed {
  display: grid;
  gap: 10px;
}

.document-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 11px;
  text-align: left;
}

.document-file-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  padding: 0;
}

button.document-file-icon {
  cursor: pointer;
}

.document-file-icon-generic {
  background: #eef6ff;
  color: var(--blue);
}

.document-file-icon-pdf {
  background: #fff7f7;
  border-color: #ffd6d2;
  color: #b42318;
}

.document-file-icon-pdf:hover,
.document-file-icon-pdf:focus-visible,
.document-file-icon-photo:hover,
.document-file-icon-photo:focus-visible {
  border-color: #ef8f87;
  outline: 0;
  box-shadow: 0 10px 24px rgba(180, 35, 24, .12);
  transform: translateY(-1px);
}

.document-file-icon .pdf-file-icon {
  width: 27px;
  height: 33px;
}

.document-file-icon-photo {
  background: #f0fbff;
  border-color: #cbeaf6;
  color: #08749a;
}

.document-file-icon-photo:hover,
.document-file-icon-photo:focus-visible {
  border-color: #83cce5;
  box-shadow: 0 10px 24px rgba(8, 116, 154, .12);
}

.document-file-icon-photo span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.document-file-icon-photo svg {
  width: 24px;
  height: 24px;
}

.document-feed strong,
.document-feed p {
  display: block;
  margin: 0;
}

.document-feed p {
  margin-top: 3px;
  color: #71808c;
  font-size: 12px;
}

.document-feed em {
  border-radius: 999px;
  background: #f2f5f8;
  color: #52616d;
  padding: 5px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.comments-frame {
  padding: 0;
}

.comment-table {
  display: grid;
}

.empty-table-state {
  display: grid;
  gap: 6px;
  min-height: 220px;
  place-items: center;
  align-content: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.empty-table-state strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}

.empty-table-state span {
  max-width: 460px;
  line-height: 1.45;
}

.comment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--soft-line);
  background: #fff;
  padding: 15px 16px;
}

.comment-row.unread {
  background: #fffaf0;
}

.comment-row:last-child {
  border-bottom: 0;
}

.comment-row strong,
.comment-row span,
.comment-row p,
.comment-row em {
  display: block;
}

.comment-row span {
  margin-top: 3px;
  color: #60707d;
  font-size: 12px;
}

.comment-row p {
  margin: 8px 0 0;
  color: #2f3d48;
}

.comment-row em {
  margin-top: 7px;
  color: #71808c;
  font-size: 12px;
  font-style: normal;
}

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

.visibility-toggle {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #657481;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
}

.visibility-toggle.visible {
  border-color: #9bd9bd;
  background: #eaf8f3;
  color: #14784c;
}

.visibility-toggle svg {
  width: 15px;
  height: 15px;
}

.portal-document-row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

.document-row.portal-document-row,
.portal-document-row.portal-document-file-row {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.portal-record-workspace .record-title-actions {
  display: flex;
}

.portal-record-workspace .record-title {
  padding-bottom: 18px;
}

.entity-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.back-link {
  grid-column: 1 / -1;
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--teal);
  padding: 0;
  font-size: 12px;
  font-weight: 600;
}

.entity-header span:first-child {
  display: block;
  color: #71808c;
  font-size: 12px;
  font-weight: 600;
}

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

.entity-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 18px 0;
}

.entity-tabs button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #3f4c57;
  padding: 0 13px;
  font-weight: 600;
  white-space: nowrap;
}

.entity-tabs .active {
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal) inset;
}

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

.span-2 {
  grid-column: 1 / -1;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}

.field-grid div {
  min-height: 68px;
  border: 1px solid var(--soft-line);
  border-radius: 4px;
  background: #fbfcfd;
  padding: 11px 12px;
}

.field-grid em {
  display: block;
  margin-top: 4px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  font-style: normal;
}

.linked-list,
.document-list,
.message-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.linked-list strong,
.linked-list span,
.message-list strong,
.message-list span,
.brief-grid strong,
.brief-grid span {
  display: block;
}

.linked-list span,
.message-list span,
.brief-grid span {
  margin-top: 4px;
  color: #6f7d88;
  font-size: 12px;
}

.document-list button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.next-action {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--yellow-line);
  border-radius: 5px;
  background: var(--yellow);
  padding: 14px;
  margin-bottom: 16px;
}

.next-action div {
  flex: 1;
}

.next-action strong,
.next-action p {
  display: block;
  margin: 0;
}

.next-action p {
  margin-top: 4px;
  color: #4f5c65;
}

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

.brief-grid article,
.brief-grid button {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  padding: 16px;
}

.brief-grid article strong {
  color: var(--teal);
  font-size: 26px;
}

.settings-page {
  overflow: auto;
}

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

.brand-preview {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #f8fafb;
  padding: 18px;
}

.brand-preview img {
  width: min(260px, 100%);
  height: auto;
}

.brand-preview strong,
.brand-preview span {
  display: block;
}

.brand-preview strong {
  color: var(--heading);
  font-size: 20px;
}

.brand-preview span {
  color: #687784;
}

.delegate-brand-preview {
  margin-bottom: 14px;
}

.delegate-branding-editor {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.delegate-branding-editor .brand-preview {
  margin: 0;
}

.delegate-branding-editor .brand-preview img {
  aspect-ratio: 16 / 7;
  background: #fff;
  border-radius: 10px;
  object-fit: contain;
  width: 100%;
}

.delegate-branding-editor .brand-preview .agency-photo-placeholder {
  align-items: center;
  aspect-ratio: 16 / 7;
  background: #edf5f3;
  border-radius: 10px;
  color: #0f6058;
  display: flex;
  justify-content: center;
  width: 100%;
}

.email-preview-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px;
}

.email-preview-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 12px;
}

.email-preview-card img {
  max-width: 180px;
  height: auto;
}

.email-preview-card span,
.email-preview-card p {
  color: var(--muted);
}

.email-preview-card strong {
  color: var(--heading);
  font-size: 22px;
  font-weight: 650;
}

.settings-table-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.settings-record-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.delegate-user-record .settings-page {
  padding-top: 18px;
}

.delegate-user-record-actions {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  margin-top: 4px;
  margin-bottom: 18px;
  padding: 12px;
}

.delegate-user-record-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.settings-user-record {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 16px;
}

.user-photo-drop {
  min-height: 170px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px dashed #b9c8d4;
  border-radius: var(--radius-lg);
  background: #f8fafb;
  margin-bottom: 14px;
  padding: 18px;
  text-align: center;
}

.user-photo-drop-button {
  width: 100%;
  cursor: pointer;
}

.user-photo-drop-button:hover {
  border-color: var(--teal);
  background: #f3fbf8;
}

.status-colour-select select,
.support-status-pill {
  border: 1px solid var(--line);
  font-weight: 650;
  text-transform: capitalize;
}

.status-colour-select.status-active select,
.support-status-pill.status-active {
  border-color: rgba(23, 141, 96, .28);
  background: #eaf8f1;
  color: #166c4a;
}

.status-colour-select.status-invited select,
.support-status-pill.status-invited {
  border-color: rgba(210, 151, 46, .32);
  background: #fff7e5;
  color: #8a5c0a;
}

.status-colour-select.status-paused select,
.support-status-pill.status-paused {
  border-color: rgba(79, 127, 204, .28);
  background: #eef5ff;
  color: #275b9f;
}

.status-colour-select.status-disabled select,
.support-status-pill.status-disabled {
  border-color: rgba(156, 73, 73, .28);
  background: #fff0f0;
  color: #923333;
}

.support-access-panel {
  align-content: start;
  display: grid;
  gap: 14px;
}

.support-access-heading {
  align-items: start;
}

.support-access-heading p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.support-access-card {
  border: 1px solid #d8e7e5;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fbfefd 0%, #f7fbfa 100%);
  display: grid;
  gap: 10px;
  padding: 14px;
}

.support-access-card > span,
.support-access-summary span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 650;
}

.magiclink-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.magiclink-field input {
  min-width: 0;
}

.support-access-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.support-access-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-access-summary > div {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.support-access-summary strong,
.support-access-summary em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-access-summary strong {
  color: var(--heading);
  font-size: 13px;
}

.support-access-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.support-status-pill {
  border-radius: 999px;
  display: inline-flex;
  justify-self: start;
  padding: 4px 9px;
}

.user-photo-drop > span:not(.user-avatar) {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf8f3;
  color: var(--teal);
  font-size: 24px;
  font-weight: 700;
}

.compliance-expiry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.compliance-expiry-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 12px;
}

.compliance-expiry-card strong,
.compliance-expiry-card span,
.compliance-expiry-card em {
  display: block;
}

.compliance-expiry-card strong {
  color: var(--heading);
}

.compliance-expiry-card span,
.compliance-expiry-card em {
  color: #667887;
  font-size: 12px;
  font-style: normal;
}

.certificate-file-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d6e8ff;
  border-radius: var(--radius-md);
  background: #f8fbff;
  padding: 12px;
  margin-top: 12px;
}

.certificate-file-card > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.certificate-file-card svg {
  width: 20px;
  height: 20px;
  color: var(--blue);
}

.certificate-file-card strong,
.certificate-file-card em,
.certificate-file-card small {
  display: block;
}

.certificate-file-card em,
.certificate-file-card small {
  margin-top: 3px;
  color: #667887;
  font-size: 12px;
  font-style: normal;
}

.certificate-file-card small {
  color: var(--blue);
  font-weight: 600;
}

.cpd-add-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(150px, 1fr) 90px 128px;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.cpd-add-row label {
  display: grid;
  gap: 6px;
}

.cpd-add-row span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.cpd-add-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 9px 10px;
}

.cpd-log-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: auto;
}

.compact-table {
  min-width: 620px;
}

.user-photo-drop strong,
.user-photo-drop em {
  display: block;
}

.user-photo-drop em {
  color: var(--muted);
  font-style: normal;
}

.permission-grid {
  display: grid;
  gap: 10px;
}

.permission-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 10px;
}

.permission-grid span {
  color: #35424c;
  font-weight: 600;
}

.permission-grid select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 0 10px;
}

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

.swatch-grid div {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 11px;
}

.swatch-grid i {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.agency-brand-preview,
.agency-photo-preview {
  min-height: 190px;
  align-content: start;
}

.agency-photo-preview img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.agency-photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  border: 1px dashed #c8d3dc;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--muted);
}

.agency-photo-placeholder svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}

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

.email-colour-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 14px;
}

.email-colour-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.email-colour-card div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.email-colour-card input[type="color"] {
  width: 46px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 3px;
}

.settings-subsection {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--soft-line);
  margin-top: 18px;
  padding-top: 18px;
}

.settings-subsection h3 {
  margin: 0;
  color: var(--heading);
  font-size: 17px;
  font-weight: 650;
}

.signature-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 14px;
}

.signature-preview img {
  max-width: 220px;
  max-height: 72px;
  object-fit: contain;
}

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

.routing-choice-grid .checkbox-line {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 10px 12px;
}

.agency-office-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.agency-office-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fbfcfd;
  padding: 16px;
}

.agency-office-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.agency-office-card-title {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.agency-office-card-header strong,
.agency-office-card-header span {
  display: block;
}

.agency-office-card-header strong {
  color: var(--heading);
  font-size: 18px;
  font-weight: 650;
}

.agency-office-card-header span {
  color: var(--muted);
  margin-top: 3px;
}

.agency-office-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.agency-office-card-body.is-collapsed {
  display: none;
}

.address-search-field {
  position: relative;
}

.address-suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 18px 40px rgba(22, 34, 43, .14);
  overflow: hidden;
}

.address-suggestions.is-open {
  display: grid;
}

.address-suggestions button {
  border: 0;
  border-bottom: 1px solid var(--soft-line);
  background: #fff;
  color: var(--heading);
  padding: 11px 13px;
  text-align: left;
}

.address-suggestions button:last-child {
  border-bottom: 0;
}

.address-suggestions button:not(:disabled):hover {
  background: #f5f8fa;
}

.compact-hours {
  margin-top: 14px;
}

.compact-hours .opening-hours-row {
  grid-template-columns: minmax(130px, 1fr) 130px 130px;
  align-items: center;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.compact-hours .opening-hours-row .checkbox-line {
  margin: 0;
  min-height: 38px;
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 650;
}

.profile-popover {
  position: absolute;
  top: 58px;
  right: 34px;
  z-index: 20;
  width: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 18px 45px rgba(23, 35, 44, .16);
  padding: 16px;
}

.profile-popover-head {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.profile-photo {
  height: 76px;
  border: 1px dashed #b9c6d1;
  border-radius: var(--radius-md);
  background: #f7fafc;
  color: #60707d;
}

.profile-photo span,
.profile-popover-head strong,
.profile-popover-head span {
  display: block;
}

.profile-popover-head strong {
  color: var(--heading);
  font-size: 17px;
}

.profile-popover-head span {
  color: var(--muted);
  margin-top: 4px;
}

.profile-form,
.email-form {
  display: grid;
  gap: 10px;
}

.profile-form label,
.email-form label {
  display: grid;
  gap: 6px;
}

.profile-form span,
.email-form span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.profile-form input,
.profile-form select,
.email-form input,
.email-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  outline: 0;
}

.profile-form input[type="file"] {
  padding: 8px 10px;
}

.email-form textarea {
  min-height: 180px;
  resize: vertical;
}

.profile-actions,
.email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.profile-workspace,
.portal-workspace {
  display: grid;
  align-content: start;
  gap: 18px;
}

.profile-hero,
.portal-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.profile-avatar {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  background: #eaf8f3;
  color: var(--teal);
  font-size: 26px;
  font-weight: 700;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero > div > span,
.portal-hero > div > span {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.profile-hero h1,
.portal-hero h1 {
  margin: 4px 0 5px;
  color: var(--heading);
  font-size: 30px;
}

.profile-hero p,
.portal-hero p {
  margin: 0;
  color: var(--muted);
}

.profile-hero .button,
.portal-hero .button {
  justify-self: end;
  width: fit-content;
  min-width: 170px;
}

.supplier-portal-code-banner {
  display: grid;
  gap: 5px;
  border: 1px solid #b9d8ff;
  border-radius: var(--radius-md);
  background: #f2f8ff;
  color: #273746;
  padding: 13px 15px;
}

.supplier-portal-code-banner strong,
.supplier-portal-code-banner span,
.supplier-po-card p {
  display: block;
}

.supplier-portal-code-banner strong {
  color: var(--heading);
  font-size: 14px;
}

.supplier-portal-code-banner span,
.supplier-po-card p {
  margin: 0;
  color: #5f6f7d;
  font-size: 13px;
  line-height: 1.4;
}

.supplier-po-card {
  background: #f2f8ff;
}

.supplier-po-card > span {
  color: var(--blue);
}

.supplier-po-card h3 {
  color: #123e6b;
  font-size: 20px;
  letter-spacing: .02em;
}

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

.profile-panel,
.portal-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px;
}

.profile-wide,
.portal-wide {
  grid-column: 1 / -1;
}

.button.danger {
  border-color: #f1b8b8;
  background: #fff5f5;
  color: #a92c2c;
}

.profile-form.full {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.split-actions .muted {
  color: var(--muted);
  flex: 1 1 220px;
  font-size: 12px;
  line-height: 1.45;
}

.two-factor-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

.two-factor-card {
  display: grid;
  gap: 14px;
  border: 1px solid #d8e7e5;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fbfefd 0%, #f7fbfa 100%);
  padding: 16px;
}

.two-factor-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.two-factor-card-head span,
.two-factor-setup-copy label span,
.two-factor-disable label span {
  display: block;
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.two-factor-card-head h3 {
  margin: 3px 0 5px;
  color: var(--heading);
  font-size: 18px;
  font-weight: 700;
}

.two-factor-card-head p,
.two-factor-start p,
.two-factor-setup-copy p,
.two-factor-message {
  margin: 0;
  color: #728292;
  font-size: 13px;
  line-height: 1.45;
}

.two-factor-card-head strong {
  min-width: 105px;
  border: 1px solid #f1c27c;
  border-radius: 999px;
  background: #fff8e8;
  color: #9c6200;
  padding: 7px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.two-factor-card-head strong.enabled {
  border-color: #bde9d6;
  background: #edf9f3;
  color: #17633f;
}

.two-factor-message {
  border: 1px solid #cfe1ee;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 10px 12px;
  font-weight: 600;
}

.two-factor-start,
.two-factor-disable {
  display: grid;
  gap: 12px;
}

.two-factor-disable {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.two-factor-setup-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.two-factor-qr {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 12px;
  min-height: 206px;
  display: grid;
  place-items: center;
}

.two-factor-qr img,
.two-factor-qr canvas {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
}

.two-factor-qr span {
  color: #728292;
  font-size: 13px;
  text-align: center;
}

.two-factor-setup-copy,
.two-factor-setup-copy form {
  display: grid;
  gap: 10px;
}

.two-factor-setup-copy strong {
  color: var(--heading);
  font-size: 16px;
}

.two-factor-setup-copy input,
.two-factor-disable input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
}

.two-factor-setup-copy input[readonly] {
  background: #f7fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}

.preference-grid,
.portal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.preference-grid div,
.portal-stats article {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 14px;
}

.preference-grid strong,
.preference-grid span,
.portal-stats strong,
.portal-stats span,
.portal-stats em {
  display: block;
}

.preference-grid span,
.portal-stats span,
.portal-stats em {
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
}

.portal-hero {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.portal-hero.supplier {
  background: #f1fbf7;
}

.portal-hero.tenant {
  background: #f4f9ff;
}

.portal-hero.owner {
  background: #fff9e8;
}

.portal-stats article {
  background: #fff;
}

.portal-stats strong {
  color: var(--heading);
  font-size: 24px;
}

.portal-panel h2 {
  margin: 0 0 12px;
  color: var(--heading);
  font-size: 18px;
}

.portal-list,
.portal-timeline {
  display: grid;
  gap: 10px;
}

.portal-list button,
.portal-timeline div {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 13px;
  text-align: left;
}

.portal-list strong,
.portal-list span,
.portal-timeline strong,
.portal-timeline span {
  display: block;
}

.portal-list span,
.portal-timeline span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.portal-table {
  max-height: 360px;
}

.portal-workorder-frame {
  max-height: 56vh;
  overflow: auto;
}

.portal-maintenance-table {
  min-width: 1180px;
}

.supplier-hub {
  max-width: none;
  width: 100%;
  min-height: calc(100vh - 74px);
  align-content: stretch;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

.supplier-hub .portal-page-head,
.supplier-hub .owner-stat-strip,
.supplier-hub .supplier-code-strip,
.supplier-hub .owner-mobile-tabs,
.supplier-hub .owner-tab-panel {
  min-width: 0;
}

.supplier-hub .owner-tab-panel {
  min-height: 0;
}

.supplier-workorders-panel,
.supplier-messages-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-right: 0;
}

.supplier-hub .portal-workorder-frame,
.supplier-hub .portal-message-frame {
  flex: 1 1 auto;
  max-height: none;
  min-height: 360px;
  overflow: auto;
}

.supplier-portal-table {
  min-width: 1320px;
}

.supplier-profile-grid,
.supplier-compliance-layout {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(320px, 1fr) minmax(240px, .8fr);
  gap: 12px;
}

.supplier-compliance-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.supplier-profile-card,
.supplier-edit-card,
.supplier-profile-stats {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 14px;
}

.supplier-profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.supplier-profile-card .button {
  grid-column: 1 / -1;
  justify-self: start;
}

.supplier-profile-card strong,
.supplier-profile-card span,
.supplier-profile-card em,
.supplier-profile-stats strong,
.supplier-profile-stats span {
  display: block;
}

.supplier-profile-card strong,
.supplier-edit-card h3,
.supplier-profile-stats strong {
  margin: 0;
  color: var(--heading);
  font-weight: 650;
}

.supplier-profile-card span,
.supplier-profile-card em,
.supplier-profile-stats span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.supplier-edit-card {
  display: grid;
  gap: 10px;
}

.supplier-edit-card h3 {
  font-size: 15px;
}

.supplier-edit-card .field-label.full {
  grid-column: 1 / -1;
}

.supplier-edit-card textarea {
  min-height: 92px;
  resize: vertical;
}

.supplier-compliance-group {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  column-gap: 14px;
  row-gap: 12px;
}

.supplier-compliance-group-head {
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
  align-self: center;
}

.supplier-compliance-group-head h3 {
  margin: 0;
}

.supplier-compliance-group-head span {
  color: var(--muted);
  font-size: 12px;
}

.supplier-profile-stats {
  display: grid;
  align-content: start;
  gap: 10px;
}

.supplier-profile-stats div {
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 10px;
}

.supplier-profile-stats div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.supplier-compliance-documents {
  margin-top: 14px;
}

.portal-loading-note {
  align-self: center;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 7px 10px;
  white-space: nowrap;
}

.owner-hub .portal-hero.owner {
  background: #f7fbf7;
}

.owner-portal-grid {
  align-items: start;
}

.owner-attention-panel .section-heading > span,
.owner-maintenance-list + span {
  color: var(--muted);
  font-size: 13px;
}

.owner-attention-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 14px;
}

.owner-attention-card,
.owner-empty-state,
.owner-property-card,
.owner-maintenance-row,
.owner-attention-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.owner-attention-card {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.owner-attention-card header,
.owner-property-card header,
.owner-maintenance-row,
.owner-attention-row {
  display: grid;
  gap: 4px;
}

.owner-attention-card header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.owner-attention-card span,
.owner-attention-card dt,
.owner-property-card dt,
.owner-mini-feed em,
.owner-maintenance-row em,
.owner-attention-row em,
.owner-empty-state span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
}

.owner-attention-card strong,
.owner-property-card strong,
.owner-maintenance-row strong,
.owner-attention-row strong,
.owner-empty-state strong {
  color: var(--heading);
  font-weight: 600;
}

.owner-attention-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.owner-attention-card dl,
.owner-property-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.owner-attention-card dd,
.owner-property-card dd {
  margin: 2px 0 0;
  color: var(--heading);
  font-weight: 600;
}

.owner-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--soft-line);
  background: #fbfcfd;
  padding: 10px 12px;
}

.owner-decision-state {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7faf9;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.owner-decision-state.approved {
  border-color: #b9e4c0;
  background: #f1fbf3;
  color: #237240;
}

.owner-decision-state.declined {
  border-color: #ffd0cf;
  background: #fff6f6;
  color: #a63e36;
}

.owner-decision-actions .button,
.owner-decision-actions .primary-action {
  min-height: 36px;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
}

.owner-invoice-stack,
.owner-maintenance-list,
.owner-property-grid,
.owner-mini-feed,
.owner-trade-settings {
  display: grid;
  gap: 10px;
}

.owner-invoice-stack h3,
.owner-preferences-panel h3 {
  margin: 0 0 4px;
  color: var(--heading);
  font-size: 15px;
  font-weight: 600;
}

.owner-maintenance-row,
.owner-attention-row {
  width: 100%;
  padding: 12px 13px;
  color: var(--text);
  text-align: left;
}

.owner-maintenance-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.owner-maintenance-row strong,
.owner-maintenance-row em {
  grid-column: 2;
}

.owner-maintenance-row .badge {
  grid-row: 1 / span 2;
  width: fit-content;
}

.owner-property-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-property-card {
  padding: 14px;
}

.owner-property-card header {
  margin-bottom: 12px;
}

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

.owner-preference-grid section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 14px;
}

.choice-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.choice-row input {
  accent-color: var(--teal-dark);
}

.money-field .money-input input {
  width: 100%;
}

.owner-empty-state {
  display: grid;
  gap: 4px;
  padding: 14px;
}

@media (max-width: 760px) {
  .owner-attention-grid,
  .owner-property-grid,
  .owner-preference-grid {
    grid-template-columns: 1fr;
  }

  .owner-decision-actions .button,
  .owner-decision-actions .primary-action {
    flex: 1 1 140px;
  }
}

.owner-hub {
  width: 100%;
  max-width: none;
}

.owner-portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 22px;
  overflow: hidden;
  border: 1px solid #cfe4db;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(16, 51, 52, .96), rgba(9, 88, 77, .92)),
    #103334;
  color: #fff;
  padding: 28px;
}

.owner-portal-hero span,
.owner-portal-hero h1,
.owner-portal-hero p {
  display: block;
}

.owner-portal-hero span {
  color: #bde8dc;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.owner-portal-hero h1 {
  margin: 8px 0 8px;
  color: #fff;
  font-size: 34px;
  font-weight: 650;
}

.owner-portal-hero p {
  max-width: 680px;
  margin: 0;
  color: #dcefed;
  font-size: 16px;
  line-height: 1.45;
}

.owner-portal-hero nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.owner-portal-hero nav a {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

.owner-portal-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  padding: 18px;
}

.owner-portal-hero aside strong {
  color: #fff;
  font-size: 38px;
  line-height: 1;
}

.owner-portal-hero aside span {
  color: #dcefed;
  text-transform: none;
  font-size: 14px;
}

.owner-portal-hero aside .button {
  margin-top: 10px;
  border-color: #fff;
  background: #fff;
  color: #103334;
}

.owner-portal-hero.loading {
  background: linear-gradient(135deg, #103334, #245a58);
}

.owner-loading-card strong,
.owner-loading-card span,
.owner-loading-card em {
  min-height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef5f3, #f8fbfa, #eef5f3);
}

.owner-loading-card strong {
  width: 70px;
  min-height: 26px;
}

.owner-loading-card span {
  width: 120px;
}

.owner-loading-card em {
  width: 180px;
}

.owner-portal-stats,
.owner-portal-command {
  display: grid;
  gap: 12px;
}

.owner-portal-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.owner-portal-command {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-portal-stats article,
.owner-portal-command article,
.owner-portal-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.owner-portal-stats article {
  display: grid;
  gap: 4px;
  padding: 16px;
}

.owner-portal-command article {
  display: grid;
  gap: 5px;
  background: #f8fbfa;
  padding: 15px;
}

.owner-portal-stats strong {
  color: var(--heading);
  font-size: 26px;
  font-weight: 650;
}

.owner-portal-command strong {
  color: var(--heading);
  font-size: 18px;
  font-weight: 650;
}

.owner-portal-stats span,
.owner-portal-command span {
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}

.owner-portal-stats em,
.owner-portal-command em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

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

.owner-portal-panel {
  min-width: 0;
  padding: 18px;
}

.owner-portal-panel:not(.compact),
.owner-decision-panel {
  grid-column: 1 / -1;
}

.owner-portal-shell {
  background: #fff;
}

.owner-portal-shell .app-body {
  background: #fff;
}

.owner-side-nav {
  background: #f5f7f8;
}

.owner-side-profile {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 8px;
}

.owner-side-profile > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #103334;
  color: #fff;
  font-weight: 650;
}

.owner-side-profile strong,
.owner-side-profile em {
  display: block;
}

.owner-side-profile strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 650;
}

.owner-side-profile em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.owner-side-nav nav button span,
.owner-side-nav nav a span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
}

.owner-side-nav nav small {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #e8eef0;
  color: #4d626c;
  font-size: 11px;
  font-weight: 650;
}

.owner-side-nav nav .active small {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.owner-portal-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.owner-portal-topbar-title {
  display: grid;
  gap: 2px;
}

.owner-portal-topbar-title strong {
  color: var(--heading);
  font-size: 15px;
  font-weight: 650;
}

.owner-portal-topbar-title span {
  color: var(--muted);
  font-size: 12px;
}

.owner-hub-v2 {
  width: 100%;
  max-width: none;
  gap: 16px;
  background: #fff;
}

.owner-portal-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--soft-line);
}

.owner-portal-page-head h1,
.owner-portal-page-head p {
  margin: 0;
}

.owner-portal-page-head h1 {
  color: var(--heading);
  font-size: 30px;
  font-weight: 650;
  letter-spacing: 0;
}

.owner-portal-page-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.owner-mobile-tabs {
  display: none;
}

.owner-tab-panel,
.owner-focus-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px;
}

.owner-tab-panel.loading {
  background: #fbfcfd;
}

.owner-tab-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.owner-tab-heading h2,
.owner-tab-heading p {
  margin: 0;
}

.owner-tab-heading h2 {
  color: var(--heading);
  font-size: 18px;
  font-weight: 650;
}

.owner-tab-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.owner-tab-heading.compact {
  margin-bottom: 10px;
}

.owner-tab-heading.compact h3 {
  margin: 0;
  color: var(--heading);
  font-size: 16px;
  font-weight: 620;
}

.owner-money-panel {
  display: grid;
  gap: 14px;
}

.owner-money-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 14px;
}

.owner-money-dashboard-grid,
.owner-overview-finance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 14px;
  align-items: stretch;
}

.owner-finance-chart-card,
.owner-bills-due-card {
  min-width: 0;
}

.owner-finance-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  min-height: 210px;
  border: 1px solid #e7eef3;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfd 0%, #fff 100%);
  padding: 16px 14px 12px;
}

.owner-finance-month {
  display: grid;
  grid-template-rows: minmax(130px, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.owner-finance-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  height: 130px;
}

.owner-finance-bars span {
  width: 12px;
  min-height: 4px;
  border-radius: 999px 999px 3px 3px;
  transition: height .2s ease;
}

.owner-finance-bars .income,
.owner-finance-legend .income {
  background: #33a852;
}

.owner-finance-bars .expense,
.owner-finance-legend .expense {
  background: #ec5b56;
}

.owner-finance-month strong {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-finance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.owner-finance-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.owner-finance-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.owner-bills-due-list {
  display: grid;
  gap: 8px;
}

.owner-money-summary {
  margin-bottom: 0;
}

.owner-portal-table-frame {
  max-height: min(58vh, 620px);
}

.accounts-uploaded-bills-table th,
.accounts-uploaded-bills-table td,
.owner-bills-table th,
.owner-bills-table td {
  white-space: nowrap;
}

.accounts-uploaded-bills-table td:nth-child(4),
.owner-bills-table td:nth-child(4) {
  max-width: 320px;
}

.owner-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.owner-stat-strip article,
.owner-stat-strip button {
  display: grid;
  gap: 4px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  color: inherit;
  padding: 13px;
  text-align: left;
}

.owner-stat-strip strong,
.owner-stat-strip span,
.owner-stat-strip em,
.owner-stat-strip button strong,
.owner-stat-strip button span,
.owner-stat-strip button em {
  display: block;
}

.owner-stat-strip strong {
  color: var(--heading);
  font-size: 24px;
  font-weight: 650;
}

.owner-stat-strip span {
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}

.owner-stat-strip em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.owner-stat-strip button {
  cursor: pointer;
}

.owner-stat-strip button:hover,
.owner-stat-strip button:focus-visible {
  border-color: #c7ddd9;
  background: #f7fbfa;
  outline: 0;
}

.owner-overview {
  display: grid;
  gap: 14px;
}

.owner-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  overflow: hidden;
  border: 1px solid #cfe4db;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(16, 51, 52, .96), rgba(9, 96, 82, .9)),
    #103334;
  padding: 26px;
  color: #fff;
}

.owner-landing-hero span,
.owner-landing-hero h2,
.owner-landing-hero p {
  display: block;
  margin: 0;
}

.owner-landing-hero span {
  color: #bfe7dc;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.owner-landing-hero h2 {
  margin-top: 8px;
  max-width: 720px;
  color: #fff;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: 0;
}

.owner-landing-hero p {
  margin-top: 8px;
  max-width: 760px;
  color: #e2f1ee;
  line-height: 1.45;
}

.owner-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.owner-hero-actions .button {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.owner-portfolio-showcase {
  padding: 16px;
}

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

.owner-investment-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.owner-investment-card {
  display: grid;
  grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-lg);
  background: #fff;
  min-height: 260px;
}

.owner-investment-card.compact {
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 190px;
}

.owner-investment-photo {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid var(--soft-line);
  background: #eaf1f1;
  color: #6b8089;
  cursor: pointer;
}

.owner-investment-photo img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  display: block;
}

.owner-investment-map.property-osm-map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

.owner-investment-map .property-map-loading,
.owner-investment-map .property-map-fallback {
  min-height: 190px;
}

.owner-investment-photo svg {
  width: 42px;
  height: 42px;
}

.owner-investment-body {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
}

.owner-investment-body header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.owner-investment-body strong,
.owner-investment-body span {
  display: block;
}

.owner-investment-body strong {
  color: var(--heading);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.2;
}

.owner-investment-card.compact .owner-investment-body strong {
  font-size: 15px;
}

.owner-investment-body header span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.owner-investment-body dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
}

.owner-investment-body dt,
.owner-investment-body dd {
  margin: 0;
}

.owner-investment-body dt {
  color: var(--muted);
  font-size: 11px;
}

.owner-investment-body dd {
  margin-top: 3px;
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}

.owner-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 14px;
}

.owner-attention-list,
.owner-property-list,
.owner-maintenance-list,
.owner-quote-stack,
.owner-invoice-list,
.owner-mini-feed {
  display: grid;
  gap: 10px;
}

.owner-property-list.compact {
  gap: 8px;
}

.owner-property-row,
.owner-maintenance-row,
.owner-finance-row,
.owner-mini-feed article {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.owner-property-row {
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
}

.owner-property-main strong,
.owner-property-main span,
.owner-property-main em,
.owner-maintenance-row strong,
.owner-maintenance-row span,
.owner-maintenance-row em,
.owner-finance-row strong,
.owner-finance-row span,
.owner-finance-row em,
.owner-mini-feed strong,
.owner-mini-feed span,
.owner-mini-feed em {
  display: block;
}

.owner-property-main strong,
.owner-maintenance-row strong,
.owner-finance-row strong,
.owner-mini-feed strong {
  color: var(--heading);
  font-weight: 650;
}

.owner-property-main span,
.owner-maintenance-row em,
.owner-finance-row em,
.owner-mini-feed span,
.owner-mini-feed em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.owner-property-main em {
  margin-top: 4px;
  color: #0f6f62;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.owner-property-row dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.owner-property-row dt,
.owner-property-row dd {
  margin: 0;
}

.owner-property-row dt {
  color: var(--muted);
  font-size: 11px;
}

.owner-property-row dd {
  margin-top: 3px;
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}

.owner-maintenance-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, auto) auto;
}

.owner-mini-tabs {
  display: inline-flex;
  gap: 6px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: #f7faf9;
  padding: 4px;
  margin-bottom: 14px;
}

.owner-mini-tabs button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #60737b;
  padding: 0 14px;
  font-weight: 650;
  cursor: pointer;
}

.owner-mini-tabs button span {
  min-width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #e7eff0;
  color: #51636b;
  font-size: 11px;
}

.owner-mini-tabs button.active {
  background: #103334;
  color: #fff;
}

.owner-mini-tabs button.active span {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.owner-finance-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.owner-finance-row b {
  color: var(--heading);
}

.owner-finance-row a {
  color: #0f6f62;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.owner-decision-card {
  border-radius: var(--radius-lg);
}

.owner-decision-card p {
  color: #5f7080;
  font-size: 13px;
  line-height: 1.45;
}

.owner-empty-state {
  border: 1px dashed #cddce0;
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 14px;
}

.owner-empty-state strong,
.owner-empty-state span {
  display: block;
}

.owner-empty-state strong {
  color: var(--heading);
}

.owner-empty-state span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.owner-preference-grid {
  align-items: start;
}

.owner-preferences-panel .field-label select,
.owner-preferences-panel .field-label input {
  min-height: 42px;
}

.owner-settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.owner-settings-row {
  display: grid;
  align-items: stretch;
  gap: 14px;
}

.owner-settings-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-settings-row.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.owner-settings-card {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 16px;
}

.owner-settings-preferred-trades {
  background: #fff;
}

.owner-settings-card h3,
.owner-settings-helper {
  margin: 0;
}

.owner-settings-card h3 {
  color: var(--heading);
  font-size: 16px;
  font-weight: 650;
}

.owner-settings-helper {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.owner-choice-stack {
  display: grid;
  gap: 8px;
}

.owner-choice-stack.compact {
  gap: 6px;
}

.owner-inline-money {
  max-width: 360px;
}

.owner-trade-settings,
.owner-trade-contact-grid {
  display: grid;
  gap: 10px;
}

.owner-trade-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-trade-contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-trade-contact {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid #dfe9eb;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.owner-trade-contact label,
.owner-trade-contact span {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.owner-trade-contact input {
  width: 100%;
}

.owner-preference-summary {
  display: grid;
  gap: 14px;
}

.owner-record-portfolio {
  display: grid;
  gap: 12px;
}

.owner-record .owner-investment-grid,
.owner-record-portfolio {
  grid-template-columns: minmax(0, 1fr);
}

.owner-record .owner-investment-card.compact {
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 170px;
}

.owner-record .owner-investment-card.compact .owner-investment-body {
  padding: 14px;
}

.owner-record .owner-investment-body dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-record-edit-panel {
  display: grid;
  gap: 13px;
}

.owner-record-edit-panel .section-heading {
  align-items: center;
}

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

.owner-summary-control-grid {
  margin: 12px 0;
}

.owner-summary-readonly {
  margin-top: 12px;
}

.owner-record-control-grid select,
.owner-record-control-grid input {
  width: 100%;
}

.autosave-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.owner-preference-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.owner-preference-pill-grid article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 12px;
}

.owner-preference-pill-grid article > span {
  width: 100%;
  color: var(--heading);
  font-size: 13px;
  font-weight: 650;
}

.owner-preference-pill-grid small {
  width: 100%;
  color: var(--muted);
  font-size: 12px;
}

.owner-preferred-trades-summary {
  display: grid;
  gap: 8px;
}

.owner-preferred-trades-summary article {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.owner-preferred-trades-summary strong,
.owner-preferred-trades-summary span,
.owner-preferred-trades-summary em {
  display: block;
}

.owner-preferred-trades-summary strong {
  color: var(--heading);
  font-weight: 650;
}

.owner-preferred-trades-summary span,
.owner-preferred-trades-summary em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.external-portal-shell {
  background: #fff;
}

.external-portal-shell .app-body {
  background: #fff;
}

.external-side-nav {
  background: #f5f7f8;
}

.external-side-nav.tenant nav .active {
  background: var(--teal);
}

.external-side-nav.supplier nav .active {
  background: var(--teal);
}

.external-side-profile {
  margin-bottom: 14px;
}

.external-side-nav nav button span,
.external-side-nav nav a span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
}

.external-side-nav nav small {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #e8eef0;
  color: #4d626c;
  font-size: 11px;
  font-weight: 650;
}

.external-side-nav nav .active small {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.external-portal-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.portal-hub-v2 {
  max-width: 1180px;
  gap: 16px;
}

.portal-hub-v2.supplier-hub {
  max-width: none;
}

.supplier-stat-strip button,
.supplier-stat-strip a {
  display: grid;
  gap: 4px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  color: inherit;
  padding: 13px;
  text-align: left;
  text-decoration: none;
}

.supplier-stat-strip button strong,
.supplier-stat-strip button span,
.supplier-stat-strip button em,
.supplier-stat-strip a strong,
.supplier-stat-strip a span,
.supplier-stat-strip a em {
  display: block;
  text-decoration: none;
}

.supplier-stat-strip a:hover,
.supplier-stat-strip a:focus-visible {
  border-color: #c7ddd9;
  background: #f7fbfa;
  outline: 0;
}

.supplier-stat-strip button.tone-danger,
.supplier-stat-strip a.tone-danger {
  border-color: #f0c9c9;
  background: #fff1f1;
}

.supplier-stat-strip button.tone-danger strong,
.supplier-stat-strip button.tone-danger span,
.supplier-stat-strip a.tone-danger strong,
.supplier-stat-strip a.tone-danger span {
  color: #9f1d1d;
}

.supplier-stat-strip button.tone-danger em,
.supplier-stat-strip a.tone-danger em {
  color: #b94a48;
}

.portal-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--soft-line);
}

.portal-page-head h1,
.portal-page-head p {
  margin: 0;
}

.portal-page-head h1 {
  color: var(--heading);
  font-size: 30px;
  font-weight: 650;
}

.portal-page-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.portal-work-list,
.portal-document-list {
  display: grid;
  gap: 10px;
}

.portal-work-row,
.portal-document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(170px, .6fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.portal-document-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.portal-signing-list {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.portal-signing-card {
  display: grid;
  gap: 12px;
  border: 1px solid #bfe6d1;
  border-radius: var(--radius-lg);
  background: #f5fffa;
  padding: 16px;
}

.portal-signing-card > div:first-child {
  display: grid;
  gap: 4px;
}

.portal-signing-card span,
.portal-signing-card em {
  color: var(--helper-text);
  font-size: 13px;
  font-style: normal;
}

.portal-signing-card strong {
  color: var(--heading);
  font-size: 17px;
  font-weight: 650;
}

.portal-signing-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-signing-progress span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 7px 10px;
  color: var(--heading);
  font-weight: 600;
}

.portal-signing-progress span.done {
  border-color: #b8dfc0;
  background: #eaf8ed;
  color: #246c34;
}

.portal-signing-progress span.active {
  border-color: #ffd27a;
  background: #fff6de;
  color: #9a5a00;
}

.portal-signing-progress span.declined {
  border-color: #ffc5c5;
  background: #fff1f1;
  color: #9d2525;
}

.portal-signature-field,
.portal-signing-consent {
  display: grid;
  gap: 7px;
}

.portal-signature-field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0 12px;
  font: inherit;
}

.portal-signing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-work-row strong,
.portal-work-row span,
.portal-work-row em,
.portal-document-row strong,
.portal-document-row span {
  display: block;
}

.portal-work-row strong,
.portal-document-row strong {
  color: var(--heading);
  font-weight: 650;
}

.portal-work-row span,
.portal-document-row span {
  color: var(--muted);
  font-size: 12px;
}

.portal-work-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.supplier-next-step {
  overflow: hidden;
  border-color: #ffc76b;
  background: #fff;
}

.supplier-next-step.accepted {
  border-color: #bfe4d1;
  background: #fff;
}

.supplier-next-step.declined {
  border-color: #f0c9c9;
  background: #fff;
}

.supplier-next-step.awaiting {
  border-color: #ffc76b;
  background: #fff;
}

.supplier-next-step footer {
  border-top: 1px solid var(--soft-line);
  background: #fbfcfd;
  padding: 10px 12px;
}

.supplier-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.supplier-decision-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #fff;
  padding: 0 14px;
  font-weight: 650;
  cursor: pointer;
}

.supplier-decision-button svg {
  width: 18px;
  height: 18px;
}

.supplier-decision-button.accept {
  background: #138a68;
}

.supplier-decision-button.decline {
  background: #b42318;
}

.supplier-entry-helper {
  margin: 0;
  border: 1px solid #f0c56f;
  border-radius: var(--radius-md);
  background: #fff7df;
  color: #665126;
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.tenant-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 14px;
}

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

.tenant-quick-actions button,
.tenant-quick-actions a {
  display: grid;
  gap: 4px;
  min-height: 58px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--heading);
  padding: 12px;
  text-align: left;
  text-decoration: none;
}

.tenant-quick-actions strong,
.tenant-quick-actions span {
  display: block;
}

.tenant-quick-actions strong {
  font-weight: 650;
}

.tenant-quick-actions span {
  color: var(--muted);
  font-size: 12px;
}

.supplier-code-strip.slim {
  grid-template-columns: minmax(0, 1fr) auto;
  border-radius: var(--radius-md);
  border-color: #f0c56f;
  background: #fff7df;
  padding: 13px 14px;
}

.supplier-compliance-grid.polished {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 920px) {
  .owner-portal-shell {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .external-portal-shell {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .owner-side-profile {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 8px;
  }

  .owner-side-profile div,
  .owner-side-nav .sidebar-profile div,
  .external-side-profile div,
  .external-side-nav nav span {
    display: none;
  }

  .external-side-nav nav button,
  .external-side-nav nav a {
    justify-content: center;
    padding: 0;
  }

  .owner-overview-grid,
  .owner-overview-finance-grid,
  .owner-money-dashboard-grid,
  .owner-property-row,
  .owner-investment-grid,
  .owner-investment-card,
  .owner-settings-grid,
  .owner-settings-row.two,
  .owner-settings-row.four,
  .owner-preference-pill-grid,
  .tenant-home-grid,
  .supplier-profile-grid,
  .supplier-compliance-layout {
    grid-template-columns: 1fr;
  }

  .owner-investment-card.compact {
    grid-template-columns: 1fr;
  }

  .delegate-google-head {
    display: grid;
    align-items: start;
  }

  .owner-investment-photo {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--soft-line);
  }

  .owner-trade-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-trade-contact-grid {
    grid-template-columns: 1fr;
  }

  .supplier-hub {
    min-height: auto;
    overflow: visible;
  }

  .supplier-compliance-group {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .supplier-hub .portal-workorder-frame,
  .supplier-hub .portal-message-frame {
    max-height: 64vh;
    min-height: 320px;
  }

  .owner-property-row dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-maintenance-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .owner-maintenance-row .button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .portal-work-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .portal-work-row > .button,
  .portal-work-row > .primary-action {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .owner-portal-topbar,
  .external-portal-topbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .owner-portal-topbar .topbar-actions > .button,
  .external-portal-topbar .topbar-actions > .button {
    display: none;
  }

  .owner-hub-v2,
  .portal-hub-v2 {
    padding: 22px 16px 32px;
  }

  .owner-landing-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .owner-hero-actions {
    justify-content: stretch;
  }

  .owner-hero-actions .button,
  .owner-hero-actions .primary-action {
    flex: 1 1 100%;
    justify-content: center;
  }

  .owner-stat-strip,
  .owner-investment-body dl,
  .owner-trade-settings,
  .owner-trade-contact {
    grid-template-columns: 1fr;
  }

  .delegate-google-workspace {
    grid-template-rows: auto minmax(360px, 1fr);
  }

  .delegate-google-frame {
    min-height: 360px;
  }

  .owner-portal-page-head,
  .portal-page-head {
    display: grid;
    align-items: start;
  }

  .owner-portal-page-head .button,
  .portal-page-head .button {
    width: 100%;
    justify-content: center;
  }

  .owner-mobile-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .owner-mobile-tabs button,
  .owner-mobile-tabs a {
    flex: 0 0 auto;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #2f3f4a;
    padding: 0 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .owner-mobile-tabs button.active,
  .owner-mobile-tabs a.active {
    border-color: #103334;
    background: #103334;
    color: #fff;
  }

  .owner-mobile-tabs span {
    margin-left: 6px;
    color: inherit;
    font-size: 12px;
  }

  .owner-side-nav nav,
  .external-side-nav nav {
    display: grid;
  }

  .owner-side-profile div,
  .owner-side-nav .sidebar-profile div,
  .external-side-nav .sidebar-profile div {
    display: block;
  }

  .owner-stat-strip,
  .owner-overview-finance-grid,
  .owner-money-dashboard-grid,
  .owner-overview-grid,
  .owner-property-row dl,
  .owner-preference-grid,
  .supplier-compliance-grid.polished {
    grid-template-columns: 1fr;
  }

  .owner-maintenance-row,
  .owner-finance-row,
  .portal-work-row,
  .portal-document-row,
  .supplier-code-strip.slim {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .owner-tab-heading {
    display: grid;
  }
}

.owner-decision-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
}

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

.owner-decision-card {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #ffc76b;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 0;
  box-shadow: none;
}

.owner-decision-card.quote::before {
  content: none;
}

.owner-decision-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid #ffc76b;
  background: #fff3d8;
  padding: 11px 12px;
}

.owner-decision-card header strong,
.owner-decision-card header em,
.owner-decision-card p,
.owner-decision-meta span {
  display: block;
}

.owner-decision-card header strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.owner-decision-card header b {
  border: 1px solid #edc36f;
  border-radius: 999px;
  background: #fff;
  color: var(--orange);
  padding: 6px 9px;
  font-size: 13px;
  font-weight: 650;
}

.owner-decision-card header em,
.owner-decision-card p,
.owner-decision-meta span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.owner-decision-card header span {
  display: block;
  margin-bottom: 4px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.owner-decision-card p {
  margin: 0;
  color: #6f7d88;
  font-size: 12px;
  font-weight: 500;
  padding: 12px;
}

.owner-decision-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 12px 12px;
}

.owner-decision-meta span {
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: #fff;
  padding: 6px 9px;
}

.owner-decision-meta .badge {
  border: 0;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 650;
}

.owner-job-quote-stack {
  gap: 10px;
}

.owner-job-record .owner-next-step {
  overflow: hidden;
  border-color: #ffc76b;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: none;
}

.owner-job-record .owner-next-step > header {
  border-bottom: 1px solid #ffc76b;
  background: #fff3d8;
  color: var(--orange);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.owner-job-record .owner-next-step > div {
  padding: 12px;
}

.owner-job-record .owner-next-step strong,
.owner-job-record .owner-next-step span {
  display: block;
}

.owner-job-record .owner-next-step strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
}

.owner-job-record .owner-next-step span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.owner-job-record .owner-next-step footer {
  border-top: 1px solid var(--soft-line);
  background: #fbfcfd;
  padding: 10px 12px;
}

.owner-finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.owner-finance-row span,
.owner-finance-row em {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.owner-finance-row strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 650;
}

.owner-finance-row b {
  color: var(--heading);
}

.owner-finance-row a {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 600;
}

.owner-maintenance-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, .35fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}

.owner-maintenance-row .badge {
  grid-row: auto;
}

.owner-maintenance-row strong,
.owner-maintenance-row em {
  grid-column: auto;
}

.owner-maintenance-row div {
  display: grid;
  gap: 3px;
}

.owner-maintenance-row span:not(.badge),
.owner-maintenance-row em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.owner-property-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.owner-property-card header em {
  border-radius: 999px;
  background: #f1f6f5;
  color: var(--teal-dark);
  padding: 6px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.owner-mini-feed article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.owner-mini-feed article strong,
.owner-mini-feed article span,
.owner-mini-feed article em {
  display: block;
}

.owner-mini-feed article strong {
  color: var(--heading);
  font-weight: 650;
}

.owner-mini-feed article span,
.owner-mini-feed article em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

@media (max-width: 900px) {
  .owner-portal-hero,
  .owner-portal-stats,
  .owner-portal-command,
  .owner-decision-layout,
  .owner-portal-grid {
    grid-template-columns: 1fr;
  }

  .owner-maintenance-row,
  .owner-finance-row {
    grid-template-columns: 1fr;
  }
}

.portal-property-photo {
  min-height: 210px;
}

.portal-property-photo .photo-thumbs span {
  width: 42px;
  height: 42px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.portal-property-photo .photo-thumbs span.active {
  border-color: var(--blue);
}

.portal-property-photo .photo-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.external-portal {
  max-width: 1320px;
}

.external-portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 22px;
  overflow: hidden;
  border: 1px solid #cfe4db;
  border-radius: 24px;
  color: #fff;
  padding: 28px;
}

.external-portal-hero.tenant {
  background: linear-gradient(135deg, rgba(16, 51, 52, .96), rgba(20, 93, 122, .9)), #103334;
}

.external-portal-hero.supplier {
  background: linear-gradient(135deg, rgba(16, 51, 52, .96), rgba(89, 82, 32, .9)), #103334;
}

.external-portal-hero span,
.external-portal-hero h1,
.external-portal-hero p {
  display: block;
}

.external-portal-hero span {
  color: #bde8dc;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.external-portal-hero h1 {
  margin: 8px 0;
  color: #fff;
  font-size: 34px;
  font-weight: 650;
}

.external-portal-hero p {
  max-width: 720px;
  margin: 0;
  color: #e3f1ef;
  font-size: 16px;
  line-height: 1.45;
}

.external-portal-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  padding: 18px;
}

.external-portal-hero aside strong {
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.external-portal-hero aside span {
  color: #e3f1ef;
  text-transform: none;
  font-size: 14px;
}

.external-portal-hero aside .button {
  margin-top: 10px;
  border-color: #fff;
  background: #fff;
  color: #103334;
}

.external-portal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.external-portal-stats article,
.external-portal-panel,
.supplier-code-strip {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.external-portal-stats article {
  display: grid;
  gap: 4px;
  padding: 16px;
}

.external-portal-stats strong {
  color: var(--heading);
  font-size: 25px;
  font-weight: 650;
}

.external-portal-stats span {
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}

.external-portal-stats em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

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

.external-portal-panel {
  min-width: 0;
  padding: 18px;
}

.external-portal-panel.span-2,
.tenant-property-panel,
.tenant-maintenance-panel {
  grid-column: 1 / -1;
}

.external-portal-panel h2 {
  margin: 0 0 12px;
  color: var(--heading);
  font-size: 18px;
  font-weight: 650;
}

.delegate-google-workspace {
  min-height: calc(100dvh - 78px);
  display: grid;
  grid-template-rows: minmax(620px, 1fr);
  gap: 0;
  padding-bottom: 18px;
}

.delegate-google-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.delegate-google-head span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.delegate-google-head h1 {
  margin: 4px 0;
  color: var(--heading);
  font-size: 34px;
  font-weight: 700;
}

.delegate-google-head p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.delegate-google-frame-card {
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.delegate-google-frame {
  width: 100%;
  height: 100%;
  min-height: 620px;
  border: 0;
  background: #f8fafb;
}

.delegate-gmail-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  height: calc(100dvh - 78px);
  min-height: 0;
  overflow: hidden;
  background: #f6f8fc;
  padding: 12px 14px 14px;
}

.delegate-gmail-header,
.delegate-gmail-connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.delegate-gmail-header h1,
.delegate-gmail-connect h1 {
  margin: 0;
  color: var(--heading);
  font-size: 28px;
  font-weight: 700;
}

.delegate-gmail-header span,
.delegate-gmail-connect span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.delegate-gmail-header > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.delegate-gmail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  color: #3f4a54;
}

.delegate-gmail-brand svg {
  width: 22px;
  height: 22px;
  color: #5f6368;
}

.delegate-gmail-brand strong {
  color: #3f4a54;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
}

.delegate-gmail-account {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 230px;
  justify-content: flex-end;
}

.delegate-gmail-account span {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5f6368;
  font-size: 13px;
  font-weight: 500;
}

.delegate-google-mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #eaf1fb;
  padding: 4px;
}

.delegate-google-mode-tabs button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #3f4a54;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.delegate-google-mode-tabs button.active {
  background: #fff;
  color: #1a73e8;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .16);
}

.delegate-google-mode-tabs svg {
  width: 17px;
  height: 17px;
}

.gmail-icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
}

.gmail-icon-button:disabled {
  opacity: .38;
  cursor: default;
}

.gmail-icon-button:hover {
  background: #e8eaed;
}

.gmail-icon-button svg {
  width: 19px;
  height: 19px;
}

.delegate-gmail-status {
  border: 1px solid #f2c46f;
  border-radius: var(--radius-md);
  background: #fff7df;
  color: #8a5600;
  padding: 12px 14px;
  font-weight: 650;
}

.delegate-gmail-connect {
  max-width: 760px;
  align-self: start;
}

.delegate-gmail-connect svg {
  width: 34px;
  height: 34px;
  color: var(--brand);
}

.delegate-gmail-shell {
  display: grid;
  grid-template-columns: 248px minmax(380px, 520px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}

.delegate-gmail-rail,
.delegate-gmail-list,
.delegate-gmail-reader {
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.delegate-gmail-rail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  background: #f6f8fc;
  padding: 12px 12px 14px 0;
}

.delegate-gmail-compose-button {
  width: fit-content;
  min-width: 138px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 16px;
  background: #c2e7ff;
  color: #001d35;
  margin-left: 8px;
  padding: 0 22px 0 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .18);
}

.delegate-gmail-compose-button:hover {
  box-shadow: 0 2px 5px rgba(60, 64, 67, .24);
}

.delegate-gmail-compose-button svg {
  width: 20px;
  height: 20px;
}

.delegate-gmail-list {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  border-left: 1px solid #eef0f4;
  border-right: 1px solid #eef0f4;
  padding: 0;
}

.delegate-gmail-tabs {
  display: grid;
  gap: 2px;
}

.delegate-gmail-user-labels {
  min-height: 0;
  overflow: auto;
  padding-bottom: 10px;
}

.delegate-gmail-tabs button {
  height: 32px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: transparent;
  color: #202124;
  padding: 0 14px 0 22px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

.delegate-gmail-tabs button.active {
  background: #d3e3fd;
  color: #001d35;
  font-weight: 700;
}

.delegate-gmail-tabs svg {
  width: 18px;
  height: 18px;
}

.delegate-gmail-tabs em {
  color: inherit;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.delegate-gmail-label-empty {
  display: block;
  color: #7b8794;
  padding: 4px 14px 8px 22px;
  font-size: 12px;
}

.delegate-gmail-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #5f6368;
  padding: 8px 14px 0 22px;
  font-size: 13px;
  font-weight: 700;
}

.delegate-gmail-labels button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5f6368;
}

.delegate-gmail-labels button svg {
  width: 16px;
  height: 16px;
}

.delegate-gmail-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(720px, 100%);
  height: 48px;
  border: 0;
  border-radius: 24px;
  background: #eaf1fb;
  padding: 0 16px;
}

.delegate-gmail-search svg {
  width: 20px;
  height: 20px;
  color: #5f6368;
}

.delegate-gmail-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #202124;
  font-size: 15px;
}

.delegate-gmail-list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #eef0f4;
  padding: 0 12px;
  color: #5f6368;
}

.delegate-gmail-list-toolbar input[type="checkbox"],
.delegate-gmail-row input[type="checkbox"],
.delegate-gmail-reader-actions input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1a73e8;
}

.delegate-gmail-list-toolbar label {
  display: grid;
  place-items: center;
}

.delegate-gmail-label-select {
  max-width: 150px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #5f6368;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
}

.delegate-gmail-label-select:hover:not(:disabled) {
  border-color: #d7dde5;
  background: #f1f3f4;
}

.delegate-gmail-list-toolbar span {
  margin-left: auto;
  color: #5f6368;
  font-size: 12px;
  font-weight: 600;
}

.delegate-gmail-message-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 0;
}

.delegate-gmail-row {
  display: grid;
  grid-template-columns: 18px 18px minmax(110px, .85fr) minmax(140px, 1fr) minmax(120px, 1fr) 92px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid #eef0f4;
  border-radius: 0;
  background: #f8fafd;
  padding: 0 12px;
  text-align: left;
  color: #202124;
}

.delegate-gmail-row input {
  pointer-events: auto;
}

.delegate-gmail-row.active {
  background: #e8f0fe;
  box-shadow: inset 3px 0 0 #1a73e8;
}

.delegate-gmail-row:hover {
  background: #eef3fb;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18);
  position: relative;
  z-index: 1;
}

.delegate-gmail-row.unread strong {
  font-weight: 700;
}

.delegate-gmail-row.unread {
  background: #fff;
}

.delegate-gmail-star {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: #c4c7c5;
}

.delegate-gmail-star svg {
  width: 16px;
  height: 16px;
  fill: none;
}

.delegate-gmail-star.starred,
.gmail-icon-button.starred {
  color: #f4b400;
}

.delegate-gmail-star.starred svg,
.gmail-icon-button.starred svg {
  fill: currentColor;
}

.delegate-gmail-row strong,
.delegate-gmail-row span,
.delegate-gmail-row em,
.delegate-gmail-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delegate-gmail-row strong {
  color: #202124;
  font-size: 13px;
  font-weight: 500;
}

.delegate-gmail-row span,
.delegate-gmail-row small {
  color: #3f4a54;
  font-size: 12px;
  font-weight: 600;
}

.delegate-gmail-row em {
  color: #5f6368;
  font-size: 12px;
  font-style: normal;
}

.delegate-gmail-reader {
  overflow: auto;
  background: #fff;
}

.delegate-gmail-message {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100%;
}

.delegate-gmail-message header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #eef0f4;
  padding: 20px 26px 16px;
  background: #fff;
}

.delegate-gmail-message h2 {
  margin: 6px 0 2px;
  color: #202124;
  font-size: 24px;
  font-weight: 400;
}

.delegate-gmail-message p {
  margin: 0;
  color: #5f6368;
  font-size: 12px;
}

.delegate-gmail-message header span {
  color: #202124;
  font-size: 13px;
  font-weight: 600;
}

.delegate-gmail-message header > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.delegate-gmail-reader-actions {
  align-items: center;
}

.delegate-gmail-reader-actions label.gmail-icon-button {
  margin: 0;
}

.delegate-gmail-body-panel {
  min-height: 0;
  overflow: auto;
}

.delegate-gmail-body-frame {
  width: 100%;
  min-height: 640px;
  border: 0;
  background: #fff;
}

.delegate-gmail-body-text {
  margin: 0;
  padding: 26px;
  white-space: pre-wrap;
  color: #202124;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.delegate-gmail-empty {
  display: grid;
  gap: 4px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  color: var(--muted);
}

.delegate-gmail-empty.large {
  place-content: center;
  min-height: 420px;
  text-align: center;
}

.delegate-gmail-compose textarea {
  min-height: 180px;
}

.delegate-gmail-reply {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  background: #fbfcfc;
  padding: 16px 18px 18px;
}

.delegate-gmail-reply label {
  display: grid;
  gap: 8px;
  color: var(--heading);
  font-weight: 700;
}

.delegate-gmail-reply textarea {
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  color: var(--text);
  font: inherit;
}

.delegate-gmail-reply > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delegate-calendar-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}

.delegate-calendar-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  background: #f6f8fc;
  padding: 12px 12px 14px 0;
}

.delegate-calendar-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 2px;
}

.delegate-calendar-list button {
  min-height: 34px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: transparent;
  color: #202124;
  padding: 0 14px 0 22px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

.delegate-calendar-list button.active {
  background: #d3e3fd;
  color: #001d35;
}

.delegate-calendar-list i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--calendar-color, #1a73e8);
}

.delegate-calendar-main {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid #eef0f4;
}

.delegate-calendar-main > header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #eef0f4;
  padding: 10px 22px;
}

.delegate-calendar-main h2 {
  margin: 3px 0 0;
  color: #202124;
  font-size: 22px;
  font-weight: 500;
}

.delegate-calendar-main span {
  color: #5f6368;
  font-size: 12px;
  font-weight: 650;
}

.delegate-calendar-agenda {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 22px;
}

.delegate-calendar-event {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
}

.delegate-calendar-event time {
  color: #1a73e8;
  font-size: 12px;
  font-weight: 700;
}

.delegate-calendar-event strong,
.delegate-calendar-event span,
.delegate-calendar-event small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delegate-calendar-event strong {
  color: #202124;
  font-weight: 650;
}

.delegate-calendar-event span,
.delegate-calendar-event small {
  margin-top: 2px;
  color: #5f6368;
  font-size: 12px;
}

.delegate-calendar-event > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.delegate-calendar-modal textarea {
  min-height: 120px;
}

.supplier-code-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: #fff7df;
  padding: 15px 16px;
}

.supplier-code-strip strong,
.supplier-code-strip span {
  display: block;
}

.supplier-code-strip strong {
  color: var(--heading);
  font-weight: 650;
}

.supplier-code-strip span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.supplier-code-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.supplier-work-grid,
.tenant-maintenance-list,
.supplier-mini-list,
.tenant-lodged-list {
  display: grid;
  gap: 12px;
}

.supplier-work-card,
.tenant-maintenance-card,
.supplier-mini-row,
.tenant-request-row {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.supplier-work-card {
  display: grid;
  gap: 12px;
}

.supplier-work-card header,
.tenant-maintenance-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.tenant-maintenance-card header {
  grid-template-columns: auto minmax(0, 1fr);
}

.supplier-work-card header span,
.supplier-work-card header em,
.supplier-work-card p,
.tenant-maintenance-card p,
.tenant-maintenance-card footer,
.supplier-mini-row em,
.tenant-request-row span,
.tenant-request-row em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.supplier-work-card strong,
.tenant-maintenance-card strong,
.supplier-mini-row strong,
.tenant-request-row strong {
  color: var(--heading);
  font-weight: 650;
}

.supplier-work-card p,
.tenant-maintenance-card p {
  margin: 0;
}

.supplier-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-work-meta span {
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: #f8fbfa;
  color: var(--muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 600;
}

.supplier-work-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.supplier-compliance-grid div,
.tenant-info-grid div {
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: #fbfcfd;
  padding: 11px;
}

.supplier-compliance-grid span,
.tenant-info-grid dt {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.supplier-compliance-grid strong,
.tenant-info-grid dd {
  display: block;
  margin: 4px 0 0;
  color: var(--heading);
  font-weight: 650;
}

.tenant-property-layout {
  display: grid;
  grid-template-columns: minmax(280px, .65fr) minmax(0, 1fr);
  gap: 16px;
}

.tenant-property-layout h3 {
  margin: 0;
  color: var(--heading);
  font-size: 22px;
  font-weight: 650;
}

.tenant-property-layout p {
  margin: 5px 0 14px;
  color: var(--muted);
}

.tenant-request-centre .portal-request-card {
  height: 100%;
  border-color: #cfe4db;
  background: #f8fbfa;
}

.tenant-request-centre .portal-request-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tenant-request-centre .portal-request-actions button {
  border-color: #d8e6e2;
  border-radius: 14px;
}

.tenant-maintenance-card {
  display: grid;
  gap: 10px;
  background: #fbfcfd;
}

.tenant-maintenance-card footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.supplier-mini-row,
.tenant-request-row {
  display: grid;
  gap: 4px;
}

.supplier-mini-row span {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .external-portal-hero,
  .external-portal-stats,
  .external-portal-grid,
  .tenant-property-layout,
  .supplier-code-strip {
    grid-template-columns: 1fr;
  }

  .tenant-request-centre .portal-request-actions,
  .supplier-compliance-grid,
  .tenant-info-grid {
    grid-template-columns: 1fr;
  }
}

.fixture-request-photos {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.fixture-photo-hero {
  min-height: 220px;
  display: grid;
  align-content: end;
  gap: 5px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.1), rgba(0,0,0,.18)),
    linear-gradient(135deg, #dce7ed 0 28%, #f6f8f9 28% 44%, #becbd4 44% 46%, #eef3f5 46% 100%);
  padding: 18px;
  color: #243342;
}

.fixture-photo-hero span,
.fixture-photo-hero strong,
.fixture-photo-hero em {
  display: block;
}

.fixture-photo-hero span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.fixture-photo-hero strong {
  font-size: 20px;
}

.fixture-photo-hero em {
  color: #60707d;
  font-style: normal;
}

.fixture-thumbs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fixture-thumbs button {
  height: auto;
  min-height: 72px;
  display: grid;
  justify-items: start;
  gap: 3px;
  padding: 9px;
}

.fixture-thumbs button span {
  color: var(--blue);
}

.fixture-thumbs button strong,
.fixture-thumbs button em {
  display: block;
  font-size: 11px;
  line-height: 1.2;
}

.fixture-thumbs button em {
  color: var(--muted);
  font-style: normal;
}

.portal-request-card {
  border: 1px solid #b9d8ff;
  border-radius: var(--radius-lg);
  background: #f8fbff;
  padding: 16px;
}

.portal-request-card header span,
.portal-request-card header h2 {
  display: block;
  margin: 0;
}

.portal-request-card header span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.portal-request-card header h2 {
  margin-top: 4px;
  color: var(--heading);
  font-size: 18px;
}

.portal-request-actions {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.portal-request-actions button {
  min-height: 58px;
  border: 1px solid #d6e8ff;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.portal-request-actions strong,
.portal-request-actions span {
  display: block;
}

.portal-request-actions span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.lodged-requests,
.portal-request-success {
  margin-top: 14px;
}

.lodged-requests {
  display: grid;
  gap: 8px;
}

.lodged-requests > strong,
.lodged-requests span,
.lodged-requests em {
  display: block;
}

.lodged-requests div {
  border: 1px solid #cdebdc;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 9px 10px;
}

.lodged-requests span {
  color: #168357;
  font-size: 12px;
  font-weight: 700;
}

.lodged-requests em {
  margin-top: 3px;
  color: #4b5a66;
  font-style: normal;
  font-size: 13px;
}

.portal-request-success {
  border: 1px solid #bfe4d4;
  border-radius: var(--radius-sm);
  background: #effaf5;
  color: #12643f;
  padding: 10px;
}

.global-live-status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  border: 1px solid #bfe4d4;
  border-radius: var(--radius-md);
  background: #effaf5;
  color: #12643f;
  box-shadow: 0 14px 34px rgba(20, 33, 43, .16);
  padding: 11px 13px;
  font-weight: 600;
}

.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: rgba(20, 33, 43, 0.38);
  padding: 18px;
}

.portal-request-modal {
  width: min(620px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 22px 60px rgba(24, 36, 48, 0.22);
  padding: 18px;
}

.portal-request-modal header,
.portal-request-modal footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.portal-request-modal header {
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 14px;
}

.portal-request-modal header span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.portal-request-modal h2,
.portal-request-modal p {
  margin: 0;
}

.portal-request-modal h2 {
  margin-top: 4px;
  color: var(--heading);
  font-size: 22px;
}

.portal-request-modal p {
  margin: 14px 0;
  color: #4f5c65;
}

.portal-modal-fields {
  display: grid;
  gap: 12px;
}

.tenant-maintenance-modal .portal-modal-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-modal-wide {
  grid-column: 1 / -1;
}

.portal-modal-fields label {
  display: grid;
  gap: 6px;
}

.portal-modal-fields span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.portal-modal-fields input,
.portal-modal-fields select,
.portal-modal-fields textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
}

.portal-modal-fields textarea {
  min-height: 110px;
  resize: vertical;
}

.portal-request-modal footer {
  margin-top: 16px;
  justify-content: flex-start;
}

.supplier-upload-modal {
  width: min(720px, 100%);
}

.supplier-upload-modal > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.supplier-upload-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.supplier-upload-context > div {
  border: 1px solid #cfe3da;
  border-radius: var(--radius-md);
  background: #f6fbf8;
  padding: 12px;
}

.supplier-upload-context span,
.supplier-upload-context strong,
.supplier-upload-context em {
  display: block;
}

.supplier-upload-context span {
  color: #4f8a64;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.supplier-upload-context strong {
  margin-top: 4px;
  color: var(--heading);
  font-size: 15px;
  font-weight: 650;
}

.supplier-upload-context em,
.supplier-upload-file em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.supplier-upload-file input[type="file"] {
  min-height: 58px;
  border-style: dashed;
  background: #fbfcfd;
  cursor: pointer;
}

.supplier-upload-file input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--heading);
  padding: 8px 12px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.supplier-upload-file input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--heading);
  padding: 8px 12px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.profile-crop-modal {
  width: min(760px, 100%);
}

.profile-crop-modal footer {
  align-items: center;
  flex-wrap: wrap;
}

.profile-crop-layout {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 0 2px;
}

.profile-crop-stage {
  position: relative;
  width: 320px;
  height: 320px;
  overflow: hidden;
  border: 1px solid #cfd9e2;
  border-radius: 28px;
  background:
    linear-gradient(45deg, #eef3f7 25%, transparent 25%),
    linear-gradient(-45deg, #eef3f7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef3f7 75%),
    linear-gradient(-45deg, transparent 75%, #eef3f7 75%);
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
  background-size: 32px 32px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.profile-crop-stage:active {
  cursor: grabbing;
}

.profile-crop-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  transform-origin: center;
}

.profile-crop-ring {
  position: absolute;
  inset: 22px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  box-shadow:
    0 0 0 999px rgba(19, 32, 43, 0.24),
    inset 0 0 0 1px rgba(19, 32, 43, 0.16);
  pointer-events: none;
}

.profile-crop-controls {
  display: grid;
  gap: 12px;
}

.profile-crop-controls label {
  display: grid;
  gap: 8px;
}

.profile-crop-controls span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.profile-crop-controls input[type="range"] {
  accent-color: var(--blue);
}

.profile-crop-controls output {
  width: fit-content;
  border: 1px solid #d7e1ea;
  border-radius: 999px;
  background: #f7fafc;
  color: var(--heading);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}

.profile-crop-controls p {
  margin: 0;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  line-height: 1.5;
}

.profile-crop-modal label.button {
  display: inline-flex;
  cursor: pointer;
}

.dashboard-workspace {
  display: grid;
  gap: 18px;
}

.dashboard-command-header {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 18px;
}

.dashboard-command-header > div:first-child {
  max-width: 820px;
}

.dashboard-command-header span {
  color: #087f6d;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.dashboard-command-header h1 {
  color: var(--heading);
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 8px;
}

.dashboard-command-header p {
  color: #5f6e7a;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

.dashboard-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.delegate-command-header h1 {
  max-width: 720px;
}

.dashboard-role-control {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-role-control label {
  display: grid;
  gap: 5px;
}

.dashboard-role-control span,
.opening-hours-row span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.dashboard-role-control select,
.opening-hours-row input {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 0 10px;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.dashboard-hero span,
.workflow-eyebrow {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.dashboard-hero h1 {
  margin: 4px 0 6px;
  color: var(--heading);
  font-size: 30px;
}

.dashboard-hero p {
  margin: 0;
  color: var(--muted);
}

.role-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.role-tabs button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #3f4c57;
  padding: 0 12px;
  white-space: nowrap;
}

.role-tabs button.active {
  border-color: var(--teal);
  background: #eef9f6;
  color: var(--teal);
  font-weight: 600;
}

.dashboard-metrics,
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-metrics-compact {
  gap: 10px;
}

.dashboard-metrics article,
.dashboard-metrics a,
.dashboard-panel,
.pulse-grid div,
.pulse-grid a {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 16px;
}

.dashboard-metrics-compact article,
.dashboard-metrics-compact a {
  border-radius: 10px;
  min-height: 104px;
  padding: 14px;
}

.dashboard-metrics a {
  color: inherit;
  display: block;
  text-decoration: none;
}

.dashboard-metric-clickable {
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dashboard-metric-clickable:hover,
.dashboard-metric-clickable:focus-visible {
  border-color: #b9d5cf;
  box-shadow: 0 10px 24px rgba(13, 40, 41, .08);
  outline: none;
  transform: translateY(-1px);
}

.pulse-grid a {
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pulse-grid a:hover {
  border-color: #b9d5cf;
  box-shadow: 0 10px 24px rgba(13, 40, 41, .08);
  transform: translateY(-1px);
}

.dashboard-metrics strong,
.pulse-grid strong {
  display: block;
  color: var(--heading);
  font-size: 26px;
}

.dashboard-metrics-compact strong {
  font-size: 24px;
  letter-spacing: 0;
}

.dashboard-metrics span,
.dashboard-metrics em,
.pulse-grid span {
  display: block;
  color: var(--muted);
  font-style: normal;
  margin-top: 4px;
}

.dashboard-metrics-compact span {
  color: #2f3e49;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-metrics-compact em {
  font-size: 12px;
  line-height: 1.35;
}

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

.dashboard-operations-grid,
.delegate-operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 14px;
}

.dashboard-wide {
  grid-column: 1 / -1;
}

.dashboard-priority-panel {
  grid-row: span 2;
}

.dashboard-panel .section-heading {
  gap: 10px;
}

.dashboard-panel .section-heading h2 {
  margin-bottom: 2px;
}

.dashboard-panel .section-heading p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.dashboard-actions-quiet {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-actions-quiet button {
  align-items: center;
  background: #fbfcfc;
  border: 1px solid #e3ebef;
  border-radius: 9px;
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 48px;
  padding: 8px 10px;
  text-align: left;
}

.dashboard-actions-quiet button:hover,
.dashboard-actions-quiet button:focus-visible {
  background: #f4f9f8;
  border-color: #bfd8d3;
  outline: none;
}

.dashboard-actions-quiet i {
  align-items: center;
  background: #eef5f4;
  border-radius: 8px;
  color: #087f6d;
  display: inline-flex;
  font-style: normal;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.dashboard-actions-quiet strong {
  color: #24333d;
  font-size: 13px;
  line-height: 1.25;
}

.dashboard-actions-quiet span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pulse-grid-compact {
  gap: 10px;
}

.pulse-grid-compact div,
.pulse-grid-compact a {
  border-radius: 10px;
  padding: 14px;
}

.dashboard-custom-panel {
  padding: 0;
  overflow: hidden;
}

.dashboard-custom-panel > .personal-dashboard {
  border: 0;
  box-shadow: none;
  margin: 0;
}

.delegate-operations-grid {
  align-items: start;
}

.delegate-focus-panel {
  align-content: start;
  display: grid;
  gap: 12px;
}

.delegate-focus-panel > p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.linked-list-compact {
  gap: 8px;
}

.linked-list-compact button {
  border-radius: 9px;
  min-height: 50px;
}

.bar-chart {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.bar-chart div {
  display: grid;
  grid-template-columns: 120px 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.bar-chart span,
.bar-chart strong {
  color: #42505b;
}

.bar-chart i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) var(--value), #edf2f5 var(--value));
}

.donut-overview,
.pie-overview {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

.donut-chart,
.pie-chart {
  width: 172px;
  aspect-ratio: 1;
  border-radius: 999px;
}

.donut-chart {
  display: grid;
  place-items: center;
  align-content: center;
  background: radial-gradient(circle at center, #fff 0 58%, transparent 59%), conic-gradient(#30a36a var(--score), #edf2f5 var(--score));
  box-shadow: inset 0 0 0 1px #d8e6ef;
}

.donut-chart strong,
.donut-chart span {
  display: block;
  text-align: center;
}

.donut-chart strong {
  color: var(--heading);
  font-size: 30px;
}

.donut-chart span {
  color: var(--muted);
  font-size: 12px;
}

.pie-chart {
  background: conic-gradient(var(--segments));
  box-shadow: inset 0 0 0 1px #d8e6ef;
}

.renewal-pie-chart {
  display: grid;
  place-items: center;
  align-content: center;
  background: radial-gradient(circle at center, #fff 0 47%, transparent 48%), conic-gradient(var(--segments));
}

.renewal-pie-chart strong,
.renewal-pie-chart span {
  display: block;
  position: relative;
  z-index: 1;
  text-align: center;
}

.renewal-pie-chart strong {
  color: var(--heading);
  font-size: 28px;
  line-height: 1;
}

.renewal-pie-chart span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.rating-stack,
.pie-legend {
  display: grid;
  gap: 10px;
}

.rating-stack div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.rating-stack span,
.pie-legend span {
  color: #42505b;
  font-size: 13px;
}

.rating-stack strong {
  color: var(--heading);
}

.rating-stack i {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f75dd var(--value), #edf2f5 var(--value));
}

.pie-legend span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.pie-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.pie-legend strong {
  color: var(--heading);
  font-size: 12px;
  text-align: right;
}

.renewal-pie-legend span {
  grid-template-columns: 10px minmax(0, 1fr) 32px;
}

.renewal-pipeline-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.renewal-pipeline-summary div {
  border: 1px solid #dbe6ee;
  border-radius: var(--radius-md);
  background: #f8fbfd;
  padding: 10px 12px;
}

.renewal-pipeline-summary strong,
.renewal-pipeline-summary span {
  display: block;
}

.renewal-pipeline-summary strong {
  color: var(--heading);
  font-size: 20px;
}

.renewal-pipeline-summary span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.dashboard-actions button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #2f3b45;
  padding: 10px 12px;
  text-align: left;
}

.dashboard-actions span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.dashboard-workspace-refined {
  gap: 18px;
}

.dashboard-page-head {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 16px;
}

.dashboard-page-head > div:first-child {
  max-width: 860px;
}

.dashboard-page-head span {
  color: #087f6d;
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.dashboard-page-head h1 {
  color: var(--heading);
  font-size: clamp(28px, 2.5vw, 34px);
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0 0 6px;
}

.dashboard-page-head p {
  color: #5f6e7a;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.dashboard-hero-shell {
  --dashboard-hero-image: linear-gradient(135deg, #183837, #5f786f);
  background:
    linear-gradient(180deg, rgba(8, 28, 29, .18), rgba(8, 28, 29, .72)),
    var(--dashboard-hero-image);
  background-position: center;
  background-size: cover;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(13, 40, 41, .12);
  color: #fff;
  display: grid;
  gap: 14px;
  height: min(580px, calc((100vh - 138px) * .68));
  min-height: 0;
  overflow: hidden;
  padding: 28px;
}

.delegate-dashboard-hero {
  background:
    linear-gradient(180deg, rgba(8, 28, 29, .16), rgba(8, 28, 29, .74)),
    var(--dashboard-hero-image);
}

.dashboard-hero-overlay {
  align-content: space-between;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  min-height: inherit;
}

.dashboard-hero-main {
  align-content: start;
  display: grid;
  gap: 16px;
  max-width: 780px;
  min-height: 0;
}

.dashboard-hero-main > div {
  display: grid;
  gap: 6px;
}

.dashboard-hero-logo {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  max-height: 78px;
  max-width: 270px;
  object-fit: contain;
  padding: 10px 12px;
}

.dashboard-hero-main span,
.dashboard-hero-technology span {
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-hero-technology > .dashboard-hero-tech-head span {
  color: #60707d;
}

.dashboard-hero-main h1 {
  color: #fff;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.dashboard-hero-main p {
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  max-width: 680px;
}

.dashboard-hero-technology {
  align-self: end;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  padding: 14px;
  width: 100%;
}

.dashboard-hero-tech-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.dashboard-hero-tech-head strong {
  color: #173536;
  display: block;
  font-size: 16px;
  line-height: 1.2;
  margin-top: 3px;
}

.dashboard-hero-tech-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.dashboard-hero-tech-toggle button {
  background: rgba(16, 51, 52, .06);
  border: 1px solid rgba(16, 51, 52, .14);
  border-radius: 999px;
  color: #405057;
  font-size: 12px;
  font-weight: 700;
  min-height: 30px;
  padding: 0 10px;
}

.dashboard-hero-tech-toggle button.active,
.dashboard-hero-tech-toggle button:hover,
.dashboard-hero-tech-toggle button:focus-visible {
  background: #173536;
  color: #fff;
  outline: none;
}

.dashboard-hero-tech-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.dashboard-hero-tech-grid a,
.dashboard-hero-tech-grid button {
  align-items: center;
  background: #fff;
  border: 1px solid #d9e5e8;
  border-radius: 10px;
  color: #21323c;
  display: flex;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  padding: 8px 9px;
  text-align: left;
  text-decoration: none;
}

.dashboard-hero-tech-grid a:hover,
.dashboard-hero-tech-grid a:focus-visible,
.dashboard-hero-tech-grid button:hover,
.dashboard-hero-tech-grid button:focus-visible {
  background: #fff;
  outline: 2px solid rgba(255, 255, 255, .35);
}

.dashboard-hero-tech-grid img,
.dashboard-hero-tech-grid a > span:first-child,
.dashboard-hero-tech-grid button > span:first-child {
  align-items: center;
  background: #edf5f3;
  border-radius: 8px;
  color: #0d5550;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  object-fit: contain;
  width: 28px;
}

.dashboard-hero-tech-grid a span:last-child,
.dashboard-hero-tech-grid button span,
.dashboard-hero-tech-grid button em {
  color: #21323c;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.dashboard-hero-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-hero-metrics button {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 11px;
  color: #21323c;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 12px;
  text-align: left;
}

.dashboard-hero-metrics button:hover,
.dashboard-hero-metrics button:focus-visible {
  background: #fff;
  outline: 2px solid rgba(255, 255, 255, .32);
}

.dashboard-hero-metrics span {
  color: #0a6f61;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-hero-metrics strong {
  color: var(--heading);
  font-size: 25px;
  line-height: 1;
}

.dashboard-hero-metrics em {
  color: #60707d;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.dashboard-metric-widgets {
  position: relative;
}

.dashboard-metric-strip {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
}

.dashboard-metric-widget,
.dashboard-metric-add {
  border: 1px solid rgba(15, 35, 36, .1);
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  min-height: 108px;
  padding: 14px;
  text-align: left;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

.dashboard-metric-widget {
  color: #102728;
  overflow: hidden;
  position: relative;
}

.dashboard-metric-widget::after {
  background: rgba(255, 255, 255, .48);
  border-radius: 999px;
  content: "";
  height: 72px;
  position: absolute;
  right: -24px;
  top: -24px;
  width: 72px;
}

.dashboard-metric-widget:hover,
.dashboard-metric-widget:focus-visible,
.dashboard-metric-widget.is-over {
  border-color: rgba(15, 35, 36, .24);
  box-shadow: 0 14px 28px rgba(15, 35, 36, .12);
  outline: none;
  transform: translateY(-1px);
}

.dashboard-metric-widget.is-dragging {
  opacity: .58;
  transform: scale(.98);
}

.dashboard-metric-widget span,
.dashboard-metric-widget em {
  position: relative;
  z-index: 1;
}

.dashboard-metric-widget span {
  color: rgba(16, 39, 40, .72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.dashboard-metric-widget strong {
  color: #102728;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
  margin: 7px 0;
  position: relative;
  z-index: 1;
}

.dashboard-metric-widget em {
  color: rgba(16, 39, 40, .68);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.3;
}

.dashboard-metric-widget.tone-green {
  background: #dff6e6;
}

.dashboard-metric-widget.tone-amber {
  background: #fff0c7;
}

.dashboard-metric-widget.tone-red {
  background: #ffe0de;
}

.dashboard-metric-add {
  align-items: center;
  background: #ffffff;
  color: #304346;
  gap: 8px;
  justify-items: center;
  min-width: 116px;
  place-content: center;
  text-align: center;
}

.dashboard-metric-add svg {
  height: 18px;
  width: 18px;
}

.dashboard-metric-add span {
  font-size: 12px;
  font-weight: 800;
}

.dashboard-metric-picker {
  background: #ffffff;
  border: 1px solid #d6e3e4;
  border-radius: 14px;
  box-shadow: 0 22px 46px rgba(17, 40, 42, .18);
  display: grid;
  gap: 12px;
  max-height: 440px;
  max-width: min(620px, calc(100vw - 48px));
  overflow: hidden;
  padding: 12px;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 620px;
  z-index: 40;
}

.dashboard-metric-picker header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.dashboard-metric-picker header strong {
  color: #183837;
  font-size: 14px;
}

.dashboard-metric-picker header button {
  background: #f6faf9;
  border: 1px solid #d6e3e4;
  border-radius: 8px;
  color: #253a3c;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  min-height: 34px;
  padding: 0 12px;
}

.dashboard-metric-picker > div {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.dashboard-metric-picker label {
  align-items: start;
  background: #f7faf9;
  border: 1px solid #e1ebeb;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px;
}

.dashboard-metric-picker label.active {
  background: #eef8f0;
  border-color: #8fd6a0;
}

.dashboard-metric-picker input {
  margin: 2px 6px 0 0;
}

.dashboard-metric-picker span {
  color: #203638;
  font-size: 13px;
  font-weight: 760;
}

.dashboard-metric-picker em {
  color: #66777b;
  font-size: 12px;
  font-style: normal;
  grid-column: 2;
}

.dashboard-command-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.dashboard-kpi-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-kpi-strip article,
.dashboard-kpi-strip a {
  background: #fff;
  border: 1px solid #dce7ed;
  border-radius: 10px;
  color: inherit;
  min-height: 94px;
  padding: 14px;
  text-decoration: none;
}

.dashboard-kpi-strip strong {
  color: var(--heading);
  display: block;
  font-size: 25px;
  letter-spacing: 0;
  line-height: 1;
}

.dashboard-kpi-strip span {
  color: #2f3e49;
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.dashboard-kpi-strip em {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  margin-top: 4px;
}

.dashboard-primary-grid,
.dashboard-secondary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
}

.dashboard-workflow-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-workflow-card {
  background: #fff;
  border: 1px solid #dce7ed;
  border-left: 4px solid #5fbf77;
  border-radius: 10px;
  color: var(--text);
  display: grid;
  gap: 4px;
  min-height: 116px;
  padding: 14px;
  text-align: left;
}

.dashboard-workflow-card:hover,
.dashboard-workflow-card:focus-visible {
  border-color: #b8d6d0;
  border-left-color: #087f6d;
  box-shadow: 0 10px 22px rgba(13, 40, 41, .07);
  outline: none;
}

.dashboard-workflow-card span {
  color: #087f6d;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-workflow-card strong {
  color: var(--heading);
  font-size: 24px;
  line-height: 1;
}

.dashboard-workflow-card em,
.dashboard-workflow-card small {
  color: #5f6e7a;
  font-style: normal;
  line-height: 1.35;
}

.dashboard-workflow-card em {
  font-size: 13px;
  font-weight: 700;
}

.dashboard-workflow-card small {
  font-size: 12px;
}

.dashboard-priority-list,
.dashboard-snapshot-panel {
  align-content: start;
}

.dashboard-action-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-action-list button {
  align-items: center;
  background: #fbfcfc;
  border: 1px solid #e3ebef;
  border-radius: 9px;
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 8px 10px;
  text-align: left;
}

.dashboard-action-list button:hover,
.dashboard-action-list button:focus-visible {
  background: #f5faf8;
  border-color: #bfd8d3;
  outline: none;
}

.dashboard-action-list span {
  align-items: center;
  background: #edf5f3;
  border-radius: 8px;
  color: #087f6d;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.dashboard-action-list strong {
  color: #24333d;
  font-size: 13px;
  line-height: 1.25;
}

.dashboard-action-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.dashboard-exec-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(420px, 1.05fr) minmax(360px, .95fr);
}

.dashboard-focus-queue,
.dashboard-board-panel {
  align-content: start;
}

.dashboard-focus-list,
.dashboard-board-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-focus-row,
.dashboard-board-row {
  background: #fff;
  border: 1px solid #e1e9ee;
  border-radius: 10px;
  color: var(--text);
  text-align: left;
}

.dashboard-focus-row {
  align-items: center;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  min-height: 66px;
  padding: 10px 12px;
}

.dashboard-focus-row:hover,
.dashboard-focus-row:focus-visible,
.dashboard-board-row:hover,
.dashboard-board-row:focus-visible,
.dashboard-mini-stat-grid button:hover,
.dashboard-mini-stat-grid button:focus-visible {
  border-color: #b8d6d0;
  box-shadow: 0 8px 18px rgba(16, 39, 40, .06);
  outline: none;
}

.dashboard-focus-row span {
  align-items: center;
  background: #eef6f3;
  border-radius: 999px;
  color: #087f6d;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
}

.dashboard-focus-row strong,
.dashboard-board-row strong {
  color: var(--heading);
  font-size: 13px;
  line-height: 1.25;
}

.dashboard-focus-row em,
.dashboard-board-row em {
  color: #60707d;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.dashboard-focus-row b {
  color: #52636f;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-focus-row em {
  grid-column: 2 / 3;
}

.dashboard-board-row {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 11px 12px;
}

.dashboard-board-row span {
  color: #52636f;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-mini-stat-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-mini-stat-grid button {
  background: #fff;
  border: 1px solid #dce7ed;
  border-radius: 10px;
  color: inherit;
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 13px;
  text-align: left;
}

.dashboard-mini-stat-grid span {
  color: #087f6d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-mini-stat-grid strong {
  color: var(--heading);
  font-size: 24px;
  line-height: 1;
}

.dashboard-mini-stat-grid em {
  color: #60707d;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.delegate-dashboard-secondary {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
}

.dashboard-pulse-compact {
  border: 1px solid #e1e9ee;
  border-radius: 10px;
  display: grid;
  margin-top: 12px;
  overflow: hidden;
}

.dashboard-pulse-compact div {
  align-items: center;
  border-bottom: 1px solid #eef3f5;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  padding: 9px 12px;
}

.dashboard-pulse-compact div:last-child {
  border-bottom: 0;
}

.dashboard-pulse-compact span {
  color: #52636f;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-pulse-compact strong {
  color: var(--heading);
  font-size: 16px;
}

.dashboard-note-box {
  background: #f7faf9;
  border: 1px solid #dce7ed;
  border-radius: 10px;
  color: #60707d;
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
}

.dashboard-note-box strong {
  color: var(--heading);
  font-size: 13px;
}

.dashboard-note-box span {
  font-size: 12px;
  line-height: 1.4;
}

.dashboard-workbench-panel {
  min-height: 420px;
}

.dashboard-work-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.dashboard-work-item {
  align-items: center;
  background: #fff;
  border: 1px solid #e1e9ee;
  border-radius: 9px;
  color: var(--text);
  display: grid;
  gap: 8px 10px;
  grid-template-columns: 4px 112px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 8px 10px;
  text-align: left;
}

.dashboard-work-item:hover,
.dashboard-work-item:focus-visible {
  background: #f9fcfb;
  border-color: #bcd7d1;
  outline: none;
}

.dashboard-work-item i {
  align-self: stretch;
  background: #9aabb6;
  border-radius: 999px;
  display: block;
  width: 4px;
}

.dashboard-work-item.danger i {
  background: #d94f45;
}

.dashboard-work-item.warning i {
  background: #d88a17;
}

.dashboard-work-item.money i {
  background: #087f6d;
}

.dashboard-work-item span {
  color: #60707d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-work-item strong {
  color: var(--heading);
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-work-item em,
.dashboard-work-item small {
  color: #5f6e7a;
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-work-item small {
  color: #2f3e49;
  font-weight: 700;
  text-align: right;
}

.dashboard-queue-links {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.dashboard-queue-link {
  background: #eef4f6;
  border: 1px solid #dbe7eb;
  border-radius: 9px;
  color: var(--text);
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 10px 12px;
  text-align: left;
}

.dashboard-queue-link:hover,
.dashboard-queue-link:focus-visible {
  filter: brightness(.98);
  border-color: #bfd8d3;
  outline: none;
}

.dashboard-queue-link.danger {
  background: #fff0ee;
  border-color: #f2b8b2;
}

.dashboard-queue-link.warning {
  background: #fff6e7;
  border-color: #f3cf93;
}

.dashboard-queue-link.money {
  background: #e9f8f3;
  border-color: #a8dcca;
}

.dashboard-queue-link.neutral {
  background: #eef4f6;
  border-color: #dbe7eb;
}

.dashboard-queue-link span {
  color: #2f3e49;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-queue-link strong {
  color: var(--heading);
  font-size: 24px;
  line-height: 1;
}

.dashboard-queue-link em {
  color: #60707d;
  font-size: 12px;
  font-style: normal;
}

.dashboard-empty-state {
  border: 1px dashed #cfdae1;
  border-radius: 10px;
  color: #60707d;
  display: grid;
  gap: 4px;
  padding: 18px;
}

.dashboard-empty-state strong {
  color: var(--heading);
}

.dashboard-health-score {
  align-items: baseline;
  border: 1px solid #dce7ed;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
}

.dashboard-health-score strong {
  color: var(--heading);
  font-size: 32px;
  line-height: 1;
}

.dashboard-health-score span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-signal-list,
.dashboard-compact-bars,
.dashboard-renewal-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.dashboard-signal-list div,
.dashboard-compact-bars div,
.dashboard-renewal-list div {
  align-items: center;
  display: grid;
  gap: 10px;
}

.dashboard-signal-list div {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.dashboard-signal-list span,
.dashboard-compact-bars span,
.dashboard-renewal-list span {
  color: #42505b;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-signal-list strong,
.dashboard-compact-bars strong,
.dashboard-renewal-list strong {
  color: var(--heading);
  font-size: 13px;
  text-align: right;
}

.dashboard-signal-list i {
  background: linear-gradient(90deg, #2f75dd var(--value), #edf2f5 var(--value));
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 8px;
}

.dashboard-compact-bars div {
  grid-template-columns: 120px minmax(0, 1fr) 44px;
}

.dashboard-compact-bars i {
  background: linear-gradient(90deg, #087f6d var(--value), #edf2f5 var(--value));
  border-radius: 999px;
  height: 9px;
}

.dashboard-renewal-list div {
  border-bottom: 1px solid #eef3f5;
  grid-template-columns: 10px minmax(0, 1fr) 40px;
  padding-bottom: 8px;
}

.dashboard-renewal-list i {
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.dashboard-custom-details {
  padding: 0;
}

.dashboard-custom-details summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  padding: 16px;
}

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

.dashboard-custom-details summary span {
  color: #087f6d;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-custom-details summary strong {
  color: var(--heading);
  font-size: 14px;
}

.dashboard-custom-details[open] summary {
  border-bottom: 1px solid var(--line);
}

.inbox-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 16px;
}

.inbox-workspace .page-header {
  margin-bottom: 10px;
}

.inbox-workspace > .email-shell,
.inbox-workspace > .page-section {
  margin-top: 0;
}

.inbox-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.inbox-top h1 {
  margin: 0 0 4px;
  color: var(--heading);
  font-size: 28px;
}

.inbox-top p {
  margin: 0;
  color: var(--muted);
}

.email-shell {
  min-height: 640px;
  display: grid;
  grid-template-columns: 260px 390px minmax(0, 1fr);
  gap: 14px;
}

.email-mailbox-rail,
.email-list,
.email-detail {
  min-width: 0;
}

.email-mailbox-rail {
  display: grid;
  align-content: start;
  gap: 12px;
}

.inbound-address-card,
.inbox-route-list,
.email-list,
.email-detail {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(26, 44, 54, .04);
}

.inbound-address-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.inbound-address-card span,
.inbox-route-list > span,
.email-list-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.inbound-address-card strong {
  color: var(--heading);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.inbound-address-card p {
  margin: 0;
  color: #60707d;
  font-size: 12px;
  line-height: 1.45;
}

.email-folder-list {
  display: grid;
  gap: 6px;
}

.email-folder-list button {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.email-folder-list button.active {
  border-color: #cfe1dc;
  background: #eef8f5;
  color: var(--teal);
}

.email-folder-list strong {
  font-size: 13px;
  font-weight: 700;
}

.email-folder-list span {
  min-width: 26px;
  border-radius: 999px;
  background: #edf2f4;
  color: #536672;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 7px;
  text-align: center;
}

.inbox-route-list {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.inbox-route-list p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #60707d;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.inbox-route-list strong {
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
}

.email-list {
  display: grid;
  align-content: start;
  gap: 0;
  overflow: hidden;
}

.email-list .list-search {
  margin: 12px 12px 8px;
}

.email-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--soft-line);
  padding: 0 14px 10px;
}

.email-list-heading strong {
  color: var(--heading);
  font-size: 13px;
  font-weight: 700;
}

.email-message-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 0;
  border-bottom: 1px solid var(--soft-line);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
}

.email-message-row:hover,
.email-message-row.active {
  background: #f5faf8;
}

.email-message-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f4ef;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.email-message-main,
.email-message-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.email-message-main strong,
.email-message-main em,
.email-message-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-message-main strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 700;
}

.email-message-main em {
  color: #52636f;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.email-message-main small {
  color: var(--muted);
  font-size: 12px;
}

.email-message-meta {
  justify-items: end;
}

.email-message-meta time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.email-message-skeleton {
  pointer-events: none;
}

.email-message-skeleton span,
.email-message-skeleton i {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f4, #f8fafb, #eef2f4);
  background-size: 180% 100%;
  animation: delegate-grid-skeleton 1.2s linear infinite;
}

.email-message-skeleton > span:first-child {
  width: 34px;
  height: 34px;
}

.email-message-skeleton i {
  height: 10px;
}

.email-message-skeleton i:nth-child(1) {
  width: 80%;
}

.email-message-skeleton i:nth-child(2) {
  width: 56%;
}

.email-message-skeleton i:nth-child(3) {
  width: 92%;
}

.inbox-empty-state {
  display: grid;
  gap: 6px;
  padding: 22px 16px;
  color: var(--muted);
  line-height: 1.45;
}

.inbox-empty-state strong {
  color: var(--heading);
  font-size: 15px;
}

.email-detail {
  padding: 18px;
}

.email-detail header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.email-detail header span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.email-detail h2 {
  margin: 5px 0;
  color: var(--heading);
  font-size: 22px;
}

.email-detail p {
  color: #42505b;
}

.email-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.email-meta-grid div {
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: #fbfcfd;
  padding: 10px;
}

.email-meta-grid span,
.email-meta-grid strong {
  display: block;
}

.email-meta-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.email-meta-grid strong {
  margin-top: 4px;
  color: var(--heading);
}

.email-body {
  min-height: 260px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #42505b;
  line-height: 1.55;
  padding: 16px;
  white-space: pre-wrap;
}

.outbox-table {
  min-width: 1420px;
  table-layout: fixed;
}

.outbox-table th:nth-child(1),
.outbox-table td:nth-child(1) {
  width: 22%;
}

.outbox-table th:nth-child(2),
.outbox-table td:nth-child(2),
.outbox-table th:nth-child(8),
.outbox-table td:nth-child(8) {
  width: 13%;
}

.outbox-table th:nth-child(3),
.outbox-table td:nth-child(3),
.outbox-table th:nth-child(5),
.outbox-table td:nth-child(5),
.outbox-table th:nth-child(6),
.outbox-table td:nth-child(6),
.outbox-table th:nth-child(7),
.outbox-table td:nth-child(7) {
  width: 11%;
}

.outbox-table th:nth-child(4),
.outbox-table td:nth-child(4),
.outbox-table th:nth-child(9),
.outbox-table td:nth-child(9) {
  width: 8%;
}

.inbox-status {
  height: fit-content;
  border: 1px solid #b9d7d3;
  border-radius: var(--radius-sm);
  color: var(--teal);
  padding: 5px 8px;
  text-transform: none;
}

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

  .side-nav nav span,
  .sidebar-profile div {
    display: none;
  }

  .side-brand {
    padding-inline: 0;
  }

  .side-brand img {
    width: 42px;
    margin: 0 auto;
  }

  .side-nav nav button,
  .side-nav nav a {
    justify-content: center;
    padding: 0;
  }

  .sidebar-profile {
    justify-content: center;
    padding-inline: 0;
  }

  .job-record-grid {
    grid-template-columns: 1fr;
  }

  .invoice-record-workspace {
    height: auto;
    overflow: auto;
  }

  .invoice-record-grid {
    grid-template-columns: 1fr;
  }

  .pdf-shell {
    min-height: 760px;
  }

  .invoice-side {
    overflow: visible;
  }

  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid,
  .dashboard-hero-overlay,
  .email-shell {
    grid-template-columns: 1fr;
  }

  .donut-overview,
  .pie-overview {
    grid-template-columns: 1fr;
  }

  .donut-chart,
  .pie-chart {
    width: min(220px, 100%);
    justify-self: center;
  }

  .dashboard-metrics,
  .pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 921px) and (max-width: 1180px) {
  .owner-portal-shell,
  .external-portal-shell {
    grid-template-columns: 216px minmax(0, 1fr);
  }

  .owner-portal-shell .side-nav nav span,
  .external-portal-shell .side-nav nav span,
  .owner-portal-shell .sidebar-profile div,
  .external-portal-shell .sidebar-profile div {
    display: flex;
  }

  .owner-portal-shell .side-nav nav button,
  .owner-portal-shell .side-nav nav a,
  .external-portal-shell .side-nav nav button,
  .external-portal-shell .side-nav nav a {
    justify-content: flex-start;
    padding: 0 16px;
  }

  .owner-portal-shell .side-brand,
  .external-portal-shell .side-brand {
    padding: 0 8px 22px;
  }

  .owner-portal-shell .side-brand img,
  .external-portal-shell .side-brand img {
    width: 142px;
    margin: 0;
  }

  .owner-portal-shell .sidebar-profile,
  .external-portal-shell .sidebar-profile {
    justify-content: flex-start;
    padding: 16px 8px 0;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .side-nav {
    position: static;
    height: auto;
    grid-template-rows: auto;
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px;
  }

  .side-brand,
  .sidebar-profile {
    display: none;
  }

  .side-nav nav {
    display: flex;
    overflow-x: auto;
  }

  .side-nav nav button,
  .side-nav nav a {
    width: auto;
    min-width: 50px;
    padding: 0 14px;
  }

  .side-nav nav span {
    display: none;
  }

  .topbar {
    height: 58px;
    padding: 0 12px;
  }

  .global-search {
    width: 100%;
  }

  .global-search-wrap {
    width: min(100%, calc(100vw - 116px));
  }

  .topbar-actions {
    display: flex;
  }

	  .workspace {
	    padding: 18px 12px 32px;
	  }

  .inbox-workspace {
    padding-top: 10px;
  }

  .record-action-panel {
    top: 120px;
    left: 12px;
    right: 12px;
    width: auto;
  }

	  .filter-bar {
	    display: grid;
	    align-items: start;
	    gap: 10px;
	  }

	  .filter-bar > div {
	    flex-wrap: nowrap;
	    overflow-x: auto;
	    padding-bottom: 2px;
	  }

	  .filter-bar .button {
	    flex: 0 0 auto;
	  }

  .filter-bar .button.subtle {
    border-color: var(--line);
    background: #fff;
  }

  .table-actions-row {
    justify-content: flex-start;
  }

  .action-lane {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .action-cards,
  .entity-grid,
  .brief-grid,
	  .dashboard-metrics,
	  .pulse-grid,
	  .settings-grid,
	  .swatch-grid,
	  .leasing-command-strip,
	  .proposal-builder,
	  .new-client-form,
	  .upload-redaction-panel,
	  .redaction-builder,
	  .template-pages,
	  .template-metadata-grid,
	  .settings-user-record,
	  .field-grid,
	  .tenancy-action-form,
  .delegate-branding-editor,
  .assignee-list,
  .more-action-grid,
  .inline-edit-grid,
  .action-picker div,
  .record-alert-strip,
	  .property-mini-fields {
    grid-template-columns: 1fr;
  }

  .dashboard-page-head,
  .dashboard-hero-metrics,
  .dashboard-hero-tech-grid,
  .dashboard-metric-strip,
  .dashboard-kpi-strip,
  .dashboard-exec-grid,
  .dashboard-mini-stat-grid,
  .dashboard-primary-grid,
  .dashboard-secondary-grid,
  .dashboard-workflow-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-page-head {
    align-items: start;
  }

  .dashboard-hero-shell {
    border-radius: 12px;
    height: auto;
    min-height: min(470px, calc((100vh - 112px) * .7));
    padding: 14px;
  }

  .dashboard-hero-main {
    min-height: 190px;
  }

  .dashboard-hero-main h1 {
    font-size: 30px;
  }

  .dashboard-hero-logo {
    max-height: 62px;
    max-width: 220px;
  }

  .dashboard-metric-picker {
    left: 0;
    max-width: 100%;
    right: 0;
    width: auto;
  }

  .dashboard-metric-picker > div {
    grid-template-columns: 1fr;
  }

  .dashboard-command-row {
    justify-content: stretch;
  }

  .dashboard-command-row .button {
    flex: 1;
    justify-content: center;
  }

  .dashboard-command-actions {
    justify-content: stretch;
    width: 100%;
  }

  .dashboard-command-actions .button {
    flex: 1;
    justify-content: center;
  }

  .dashboard-compact-bars div {
    grid-template-columns: 86px minmax(0, 1fr) 38px;
  }

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

  .dashboard-focus-row em {
    grid-column: auto;
  }

  .dashboard-focus-row b {
    white-space: normal;
  }

  .dashboard-work-item {
    grid-template-columns: 4px minmax(0, 1fr) auto;
  }

  .dashboard-work-item span,
  .dashboard-work-item em {
    grid-column: 2 / -1;
  }

  .dashboard-work-item small {
    grid-column: 3;
    grid-row: 2;
  }

  .dashboard-queue-links {
    grid-template-columns: 1fr;
  }

  .recurring-services-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .record-title,
  .entity-header,
  .dashboard-hero,
  .profile-hero,
  .portal-hero,
  .two-factor-card-head,
  .two-factor-disable,
  .two-factor-setup-grid,
  .inbox-top,
  .next-action,
  .status-task > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .email-shell {
    min-height: 0;
  }

  .email-meta-grid {
    grid-template-columns: 1fr;
  }

  .email-detail,
  .dashboard-panel {
    padding: 14px;
  }

  .profile-popover {
    left: 12px;
    right: 12px;
    width: auto;
  }

  .filter-bar {
    display: grid;
  }

  .filter-search {
    min-width: 0;
  }

  .live-filter-bar > div {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .accounts-actions-bar,
  .pdf-template-canvas header > div:last-child {
    justify-content: stretch;
  }

  .accounts-actions-bar,
  .accounts-upload-modal .portal-modal-fields {
    grid-template-columns: 1fr;
  }

  .template-list-heading,
  .template-state-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .template-state-panel div {
    justify-content: flex-start;
  }

  .template-metadata-grid .span-2 {
    grid-column: auto;
  }

  .accounts-actions-bar {
    display: grid;
  }

  .accounts-actions-bar .button,
  .pdf-template-canvas header .button {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .pdf-template-canvas header {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .comment-actions {
    justify-content: stretch;
  }

  .comment-actions .button {
    flex: 1;
  }

  .filter-select select {
    width: 100%;
  }

  .profile-page-grid,
  .profile-form.full,
  .profile-crop-layout,
  .permission-grid label,
  .portal-grid,
  .portal-stats,
  .proposal-public-grid,
  .proposal-public-hero,
  .proposal-pricing-columns,
  .proposal-ready-card,
  .proposal-final-card,
  .proposal-quick-card dl,
  .preference-grid {
    grid-template-columns: 1fr;
  }

  .proposal-public-kpis,
  .proposal-pricing-summary,
  .proposal-fee-table div,
  .proposal-fee-table.compact div {
    grid-template-columns: 1fr;
  }

  .proposal-fee-table b {
    text-align: left;
  }

  .proposal-public-hero p {
    font-size: 16px;
  }

  .proposal-public-hero {
    align-items: start;
  }

  .proposal-ready-card .proposal-public-actions,
  .proposal-final-card .proposal-public-actions {
    justify-content: stretch;
  }

  .proposal-ready-card .button,
  .proposal-final-card .button {
    width: 100%;
    justify-content: center;
  }

  .profile-crop-stage {
    width: min(320px, calc(100vw - 60px));
    height: min(320px, calc(100vw - 60px));
  }

  .profile-hero .button,
  .portal-hero .button {
    justify-self: stretch;
    width: 100%;
  }

  .pdf-top,
  .pdf-body,
  .two-fields,
  .invoice-match-summary {
    grid-template-columns: 1fr;
  }

  .pdf-thumbs {
    display: none;
  }

  .pdf-page-wrap {
    padding: 14px;
  }

  .invoice-pdf-page {
    min-height: 980px;
    padding: 28px 22px;
    font-size: 12px;
  }

  .pdf-brand strong {
    font-size: 32px;
  }

  .pdf-address {
    display: block;
    margin-top: 0;
    text-align: left;
  }

  .tabs,
  .record-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .record-file {
    margin-inline: -1px;
  }

  .span-2 {
    grid-column: auto;
  }
}

/* Softer product skin */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

.button,
.badge,
.entity-tabs button {
  border-radius: var(--radius-sm);
}

.side-nav nav button,
.side-nav nav a,
.global-search,
.list-search,
.table-frame,
.action-cards button,
.supplier-card,
.recommendation button,
.status-task,
.property-note-card div,
.action-picker button,
.action-picker a,
.linked-list button,
.linked-list a,
.document-list button,
.message-list button,
.brief-grid article,
.brief-grid button,
.field-grid div,
.next-action {
  border-radius: var(--radius-md);
}

.record-file,
.property-note-card,
.action-picker,
.activity-panel,
.entity-card {
  border-radius: var(--radius-lg);
}

.photo-drop {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

tr[data-row-module] {
  cursor: pointer;
}

.action-picker button.active,
.action-picker a.active {
  border-color: var(--blue);
  background: #eef6ff;
  color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}

.workflow-panel {
  border: 1px solid #b9d8ff;
  border-radius: var(--radius-lg);
  background: #f8fbff;
  padding: 16px;
}

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

.workflow-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-panel-head span {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.workflow-panel h2,
.workflow-panel p {
  margin: 0;
}

.workflow-panel h2 {
  color: var(--heading);
  font-size: 18px;
}

.workflow-panel > p {
  color: #42505b;
  margin-bottom: 14px;
}

.workflow-panel dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.workflow-panel dl div,
.workflow-preview {
  border: 1px solid #d6e8ff;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 11px;
}

.workflow-panel dt {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.workflow-panel dd {
  margin: 4px 0 0;
  color: #143e3e;
  font-weight: 600;
}

.workflow-preview {
  margin-bottom: 12px;
}

.workflow-preview strong,
.workflow-preview p {
  display: block;
  margin: 0;
}

.workflow-preview p {
  margin-top: 4px;
  color: #4b5a66;
}

.workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.maintenance-action-card.is-active {
  border-color: #b9d8ff;
  background: #f8fbff;
}

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

.action-picker .action-card-head > div {
  display: block;
  min-width: 0;
  margin-top: 0;
}

.action-picker .action-card-head .button {
  flex: 0 0 auto;
  width: auto;
}

.workflow-eyebrow {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.maintenance-action-card > p {
  margin: 0 0 14px;
  color: #42505b;
}

.simple-action-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.simple-action-form label {
  display: grid;
  gap: 6px;
}

.simple-action-form span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.simple-action-form input,
.simple-action-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  outline: 0;
}

.simple-action-form textarea {
  min-height: 92px;
  resize: vertical;
}

.action-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.action-summary-grid div {
  border: 1px solid #d6e8ff;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 11px;
}

.action-summary-grid dt {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.action-summary-grid dd {
  margin: 4px 0 0;
  color: #143e3e;
  font-weight: 600;
}

.maintenance-next-steps li {
  border-color: #d6e8ff;
}

.button.ghost {
  background: transparent;
}

.renewal-panel {
  border-color: #bde9d6;
  background: #f8fffb;
}

.renewal-workflow-controls {
  border-color: var(--line);
  background: #fff;
}

.tenancy-workflow-card {
  overflow: hidden;
  border-color: #ffc76b;
}

.tenancy-workflow-card > .tenancy-workflow-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.tenancy-workflow-card > .tenancy-workflow-control-body {
  display: block;
  padding: 0 16px 14px;
}

.tenancy-workflow-card .owner-summary-control-grid {
  margin: 0;
}

.renewal-workflow-controls .workflow-preview {
  border-color: var(--line);
  background: #f7faf9;
}

.tenancy-workflow-card > .workflow-preview {
  display: block;
  margin: 0 16px 12px;
  padding: 11px 12px;
}

.tenancy-workflow-card > .workflow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.workflow-checklist {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.workflow-checklist li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid #d7eadf;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 11px;
}

.workflow-step-dot {
  width: 22px;
  height: 22px;
  border: 1px solid #c5d3df;
  border-radius: 999px;
  background: #fff;
  padding: 0;
  cursor: pointer;
}

.workflow-checklist li.complete .workflow-step-dot {
  border-color: #30a36a;
  background: #30a36a;
  box-shadow: inset 0 0 0 5px #30a36a;
}

.workflow-checklist li.active {
  border-color: #2f75dd;
  background: #f5f9ff;
}

.workflow-checklist li.active .workflow-step-dot {
  border-color: #2f75dd;
  box-shadow: inset 0 0 0 5px #fff;
  background: #2f75dd;
}

.workflow-checklist strong,
.workflow-checklist p {
  display: block;
  margin: 0;
}

.workflow-checklist p {
  margin-top: 3px;
  color: #60707d;
  font-size: 13px;
}

.workflow-checklist p em {
  display: block;
  margin-top: 4px;
  color: #2f75dd;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.workflow-settings-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-height: 0;
}

.workflow-settings-layout .profile-wide {
  grid-column: auto;
}

.workflow-builder-page .page-section {
  display: grid;
  gap: 14px;
}

.workflow-builder-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, #fbfcfd);
  padding: 18px;
}

.workflow-studio-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 14px 16px;
  box-shadow: 0 8px 26px rgba(15, 32, 43, .04);
}

.workflow-studio-command span {
  display: block;
  color: #6b7c89;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.workflow-studio-command h2,
.workflow-studio-command p {
  margin: 0;
}

.workflow-studio-command h2 {
  margin-top: 4px;
  color: var(--heading);
  font-size: 22px;
  font-weight: 690;
}

.workflow-studio-command p {
  margin-top: 4px;
  max-width: 780px;
  color: var(--helper-text);
  font-size: 13px;
  font-weight: var(--helper-weight);
  line-height: 1.45;
}

.workflow-studio-command-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-builder-hero span,
.workflow-builder-kicker {
  display: block;
  color: #667887;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-builder-hero h2,
.workflow-builder-hero p,
.workflow-builder-titlebar h2,
.workflow-builder-titlebar p {
  margin: 0;
}

.workflow-builder-hero h2 {
  margin-top: 5px;
  color: var(--heading);
  font-size: 26px;
  font-weight: 720;
}

.workflow-builder-hero p,
.workflow-builder-titlebar p {
  margin-top: 5px;
  color: var(--helper-text);
  font-size: 13px;
  font-weight: var(--helper-weight);
  line-height: 1.45;
}

.workflow-builder-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-builder-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.workflow-builder-metrics article {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.workflow-builder-metrics strong,
.workflow-builder-metrics span {
  display: block;
}

.workflow-builder-metrics strong {
  color: var(--heading);
  font-size: 22px;
  font-weight: 700;
}

.workflow-builder-metrics span {
  margin-top: 3px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.workflow-builder-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 14px;
}

.workflow-builder-library,
.workflow-builder-sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
}

.workflow-builder-library-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.workflow-builder-canvas {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.workflow-builder-titlebar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.workflow-builder-titlebar h2 {
  color: var(--heading);
  font-size: 22px;
  font-weight: 720;
}

.workflow-ownership-note.client {
  border-color: #d4e1ee;
  background: #f3f7fb;
  color: #334a5f;
}

.workflow-builder-meta {
  margin-bottom: 0;
}

.workflow-builder-step-list {
  gap: 12px;
}

.workflow-builder-step {
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.workflow-builder-step.dragging {
  opacity: .72;
  transform: scale(.995);
}

.workflow-builder-step.drag-over {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 130, 113, .1);
}

.workflow-drag-rail {
  justify-items: center;
}

.workflow-drag-handle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #60707d;
  cursor: grab;
}

.workflow-drag-handle:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.workflow-drag-handle svg {
  width: 16px;
  height: 16px;
}

.workflow-step-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #41515d;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
}

.workflow-step-type-pill svg {
  width: 14px;
  height: 14px;
}

.workflow-step-type-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 12px;
}

.workflow-step-type-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
}

.workflow-step-type-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dbe6ed;
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
}

.workflow-step-type-icon svg {
  width: 18px;
  height: 18px;
}

.workflow-type-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
  gap: 10px;
  align-items: end;
}

.workflow-type-field {
  display: grid;
  gap: 7px;
}

.workflow-toggle-line.compact {
  min-height: 42px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px 10px;
}

.workflow-builder-sidebar {
  display: grid;
  gap: 12px;
}

.workflow-builder-side-card {
  margin: 0;
}

.workflow-builder-allocation {
  display: grid;
  grid-template-columns: 1fr;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.workflow-allocation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.workflow-allocation-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #40515d;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
}

.workflow-builder-rule-list {
  display: grid;
  gap: 9px;
}

.workflow-builder-rule-list div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: #40515d;
  font-size: 13px;
  line-height: 1.4;
}

.workflow-builder-rule-list svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.workflow-log-list.compact {
  max-height: 250px;
  overflow: auto;
}

.workflow-builder-empty {
  max-width: 720px;
}

.workflow-library,
.workflow-editor,
.workflow-preview-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.workflow-library {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 16px;
}

.workflow-library-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.workflow-library-list button {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fff, #fbfcfd);
  color: var(--text);
  padding: 12px;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.workflow-library-list button:hover {
  border-color: #c6d6df;
  box-shadow: 0 8px 24px rgba(15, 32, 43, .06);
}

.workflow-library-list button.active {
  border-color: var(--teal);
  background: #f0faf7;
  box-shadow: inset 3px 0 0 var(--teal);
}

.workflow-library-list strong,
.workflow-library-list span {
  display: block;
}

.workflow-library-row-head {
  display: flex !important;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.workflow-library-row-head strong {
  min-width: 0;
  color: var(--heading);
  line-height: 1.25;
}

.workflow-library-row-head .badge {
  flex: 0 0 auto;
  margin: -2px 0 0;
}

.workflow-library-list span {
  margin-top: 4px;
  color: #667887;
  font-size: 12px;
}

.workflow-library-list em {
  display: block;
  margin-top: 6px;
  color: #7b8b97;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.workflow-reset-button {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
}

.workflow-reset-button + .workflow-reset-button {
  margin-top: 8px;
}

.workflow-reset-button svg {
  width: 16px;
  height: 16px;
}

.workflow-empty-state {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 24px;
}

.workflow-empty-state h2,
.workflow-empty-state p {
  margin: 0;
}

.workflow-empty-state p {
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  line-height: 1.5;
}

.workflow-editor {
  padding: 16px;
}

.workflow-editor-head {
  align-items: start;
}

.workflow-editor-head p {
  margin: 4px 0 0;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.workflow-command-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}

.workflow-command-summary div {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 12px;
}

.workflow-command-summary strong,
.workflow-command-summary span {
  display: block;
}

.workflow-command-summary strong {
  color: var(--heading);
  font-size: 22px;
  font-weight: 650;
}

.workflow-command-summary span {
  margin-top: 3px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.workflow-ownership-note {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #bde9d6;
  border-radius: var(--radius-md);
  background: #f2fbf6;
  color: #315d43;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}

.workflow-editor-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--heading);
}

.workflow-editor-label span {
  color: #667887;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-editor-label strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.workflow-ownership-note svg {
  width: 18px;
  height: 18px;
}

.workflow-meta-grid,
.workflow-allocation-builder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.workflow-meta-grid label,
.workflow-allocation-builder label {
  display: grid;
  gap: 7px;
}

.workflow-meta-grid span,
.workflow-allocation-builder span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.workflow-meta-grid input,
.workflow-meta-grid textarea,
.workflow-meta-grid select,
.workflow-allocation-builder select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 9px 10px;
}

.workflow-meta-wide {
  grid-column: 1 / -1;
}

.workflow-meta-grid textarea {
  min-height: 72px;
  resize: vertical;
}

.workflow-allocation-builder {
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  align-items: end;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 12px;
}

.workflow-allocation-builder strong,
.workflow-allocation-builder span {
  display: block;
}

.workflow-log-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.workflow-log-card {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.workflow-log-list {
  display: grid;
  gap: 8px;
}

.workflow-log-list div {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-sm);
  background: #fbfcfd;
  padding: 10px;
}

.workflow-log-list strong,
.workflow-log-list span,
.workflow-log-list p {
  display: block;
  margin: 0;
}

.workflow-log-list span {
  margin-top: 4px;
  color: #667887;
  font-size: 12px;
}

.workflow-log-list p {
  margin-top: 6px;
  color: var(--text);
  font-size: 13px;
}

.workflow-comment-form {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.workflow-comment-form textarea {
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  resize: vertical;
}

.workflow-step-editor {
  display: grid;
  gap: 10px;
}

.workflow-edit-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 12px;
}

.workflow-edit-row.has-email {
  border-color: #bde9d6;
  background: #f8fcfa;
}

.workflow-edit-order {
  display: grid;
  align-content: start;
  gap: 6px;
}

.workflow-edit-order strong {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf2f7;
  color: #2f4452;
}

.workflow-edit-order .button {
  min-height: 30px;
  padding: 0;
}

.workflow-edit-order .button svg {
  width: 16px;
  height: 16px;
}

.workflow-edit-fields,
.workflow-edit-fields label,
.workflow-builder-group {
  display: grid;
  gap: 7px;
}

.workflow-edit-fields {
  gap: 10px;
}

.workflow-edit-fields span {
  color: #667887;
  font-size: 12px;
  font-weight: 600;
}

.workflow-edit-fields input,
.workflow-edit-fields textarea,
.workflow-edit-fields select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 9px 10px;
}

.workflow-edit-fields textarea {
  min-height: 70px;
  resize: vertical;
}

.workflow-step-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.workflow-step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.workflow-automation-card,
.workflow-email-builder {
  display: grid;
  gap: 12px;
  border-radius: var(--radius-md);
  padding: 12px;
}

.workflow-automation-card {
  border: 1px solid var(--soft-line);
  background: #fff;
}

.workflow-automation-card-collapsed {
  background: #fff;
}

.workflow-automation-card-active {
  border: 1px solid #d7e7e2;
  background:
    linear-gradient(180deg, #f8fcfa, #fff);
}

.workflow-automation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-toggle-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
}

.workflow-toggle-line input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
}

.workflow-toggle-line strong,
.workflow-toggle-line em {
  display: block;
}

.workflow-toggle-line strong {
  color: var(--heading);
  font-size: 13px;
  font-weight: 650;
}

.workflow-toggle-line em {
  margin-top: 2px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-style: normal;
  font-weight: var(--helper-weight);
}

.workflow-automation-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #cfe7dc;
  border-radius: 999px;
  background: #edf9f3;
  color: var(--teal);
}

.workflow-automation-icon svg {
  width: 17px;
  height: 17px;
}

.workflow-template-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(189, 233, 214, .8);
  padding-top: 12px;
}

.workflow-template-heading strong,
.workflow-template-heading span {
  display: block;
}

.workflow-template-heading strong {
  color: var(--heading);
  font-size: 13px;
  font-weight: 650;
}

.workflow-template-heading span {
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.workflow-email-builder.muted {
  border-color: var(--soft-line);
  background: #f9fbfc;
}

.workflow-email-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-email-builder-head strong,
.workflow-email-builder-head span {
  display: block;
}

.workflow-email-builder-head strong {
  color: var(--heading);
  font-weight: 650;
}

.workflow-email-builder-head span {
  margin-top: 3px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.workflow-email-builder-head svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
}

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

.workflow-template-grid .span-2 {
  grid-column: 1 / -1;
}

.workflow-chip-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.workflow-chip-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 10px;
  color: #40515d;
  font-size: 12px;
  font-weight: 600;
}

.workflow-chip-options input {
  width: auto;
  min-width: 0;
  margin: 0;
}

.workflow-email-preview {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 10px 12px;
}

.workflow-email-preview strong,
.workflow-email-preview span,
.workflow-email-preview p {
  display: block;
  margin: 0;
}

.workflow-email-preview strong {
  color: #60707d;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-email-preview span {
  margin-top: 5px;
  color: var(--heading);
  font-weight: 650;
}

.workflow-email-preview p {
  margin-top: 4px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  line-height: 1.45;
}

.workflow-preview-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
}

.workflow-studio-hero {
  background:
    linear-gradient(135deg, rgba(0, 130, 113, .08), rgba(255, 255, 255, .92) 42%),
    #fff;
}

.workflow-studio-empty > span {
  color: #667887;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-empty-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-studio-titlebar {
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 12px;
}

.workflow-studio-title-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-studio-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.workflow-studio-summary article {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
}

.workflow-studio-summary strong,
.workflow-studio-summary span {
  display: block;
}

.workflow-studio-summary strong {
  color: var(--heading);
  font-size: 24px;
  font-weight: 680;
}

.workflow-studio-summary span {
  margin-top: 3px;
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
}

.workflow-studio-summary .tooltip-icon,
.workflow-template-heading .tooltip-icon,
.workflow-step-disclosure .tooltip-icon,
.workflow-library .tooltip-icon {
  display: inline-grid;
  vertical-align: middle;
  margin-left: 5px;
}

.workflow-studio-panel,
.workflow-step-disclosure {
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

.workflow-studio-panel > summary,
.workflow-step-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  cursor: pointer;
  list-style: none;
  padding: 0 12px;
  color: var(--heading);
  font-size: 13px;
  font-weight: 680;
}

.workflow-studio-panel > summary::-webkit-details-marker,
.workflow-step-disclosure > summary::-webkit-details-marker {
  display: none;
}

.workflow-studio-panel > summary svg,
.workflow-step-disclosure > summary svg {
  width: 16px;
  height: 16px;
  color: #667887;
  transition: transform .16s ease;
}

.workflow-studio-panel[open] > summary > svg:last-child,
.workflow-step-disclosure[open] > summary > svg:last-child {
  transform: rotate(180deg);
}

.workflow-studio-panel .workflow-meta-grid {
  margin: 0;
  border-top: 1px solid var(--soft-line);
  padding: 12px;
}

.workflow-flow-empty {
  border: 1px dashed #cbd8e1;
  border-radius: var(--radius-md);
  background: #fbfcfd;
  color: var(--helper-text);
  padding: 18px;
  font-size: 13px;
}

.workflow-flow-map {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(230, 237, 242, .6) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(180deg, #fbfcfd, #fff);
  padding: 14px 14px 18px;
  scroll-snap-type: x proximity;
}

.workflow-flow-node {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  flex: 0 0 218px;
  min-height: 210px;
  border: 1px solid #d9e4eb;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 12px;
  scroll-snap-align: start;
  cursor: grab;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.workflow-flow-node::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 13px;
  height: 1px;
  background: #cbd8e1;
}

.workflow-flow-node:last-child::after {
  display: none;
}

.workflow-flow-node:hover,
.workflow-flow-node.drag-over,
.workflow-studio-step.drag-over {
  border-color: var(--teal);
  box-shadow: 0 12px 30px rgba(19, 36, 45, .08);
}

.workflow-flow-node.dragging {
  opacity: .68;
  transform: scale(.985);
}

.workflow-flow-node.email {
  border-top: 3px solid #3d8bff;
}

.workflow-flow-node.approval {
  border-top: 3px solid #e0a126;
}

.workflow-flow-node.document {
  border-top: 3px solid #d94f4f;
}

.workflow-flow-node.choice {
  border-top: 3px solid #7b8bff;
}

.workflow-flow-node.task {
  border-top: 3px solid var(--teal);
}

.workflow-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workflow-flow-number {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #eef4f7;
  color: #304452;
  font-size: 12px;
  font-weight: 750;
}

.workflow-flow-drag {
  width: 30px;
  height: 30px;
}

.workflow-flow-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dbe6ed;
  border-radius: 999px;
  background: #fbfcfd;
  color: var(--teal);
}

.workflow-flow-icon svg {
  width: 18px;
  height: 18px;
}

.workflow-flow-node strong {
  color: var(--heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.workflow-flow-node p {
  margin: 0;
  color: var(--helper-text);
  font-size: 12px;
  font-weight: var(--helper-weight);
  line-height: 1.42;
}

.workflow-flow-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-flow-signals span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: #fbfcfd;
  color: #4c5f6d;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-flow-signals svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.workflow-studio-step {
  grid-template-columns: 62px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.workflow-studio-step.email {
  border-left: 4px solid #3d8bff;
}

.workflow-studio-step.approval {
  border-left: 4px solid #e0a126;
}

.workflow-studio-step.document {
  border-left: 4px solid #d94f4f;
}

.workflow-studio-step.choice {
  border-left: 4px solid #7b8bff;
}

.workflow-studio-step.task {
  border-left: 4px solid var(--teal);
}

.workflow-studio-step .workflow-drag-rail {
  background: #f6f9fb;
  padding: 12px 8px;
}

.workflow-studio-step .workflow-edit-fields {
  padding: 12px;
}

.workflow-studio-step-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.workflow-studio-step-head h3,
.workflow-studio-step-head p {
  margin: 0;
}

.workflow-studio-step-head h3 {
  margin-top: 7px;
  color: var(--heading);
  font-size: 16px;
  font-weight: 700;
}

.workflow-studio-step-head p {
  margin-top: 4px;
  color: var(--helper-text);
  font-size: 13px;
  font-weight: var(--helper-weight);
  line-height: 1.45;
}

.workflow-step-disclosures {
  display: grid;
  gap: 8px;
}

.workflow-step-disclosure-body {
  border-top: 1px solid var(--soft-line);
  padding: 12px;
}

.workflow-step-edit-grid {
  display: grid;
  gap: 10px;
}

.workflow-step-edit-grid label,
.workflow-step-edit-grid span {
  display: grid;
  gap: 7px;
}

.workflow-quality-list svg {
  color: #506575;
}

.workflow-builder-page .section-heading {
  align-items: center;
}

.workflow-builder-page .workflow-template-heading span {
  line-height: 1.35;
}

.workflow-builder-side-card .workflow-builder-allocation {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 1180px) {
  .workflow-builder-layout {
    grid-template-columns: 1fr;
  }

  .workflow-builder-library,
  .workflow-builder-sidebar {
    position: static;
  }

  .workflow-studio-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .workflow-studio-hero,
  .workflow-studio-command,
  .workflow-builder-titlebar,
  .workflow-studio-step-head {
    display: grid;
  }

  .workflow-studio-command {
    grid-template-columns: 1fr;
  }

  .workflow-studio-command-actions {
    justify-content: start;
  }

  .workflow-studio-summary {
    grid-template-columns: 1fr 1fr;
  }

  .workflow-studio-step {
    grid-template-columns: 1fr;
  }

  .workflow-studio-step .workflow-drag-rail {
    display: flex;
    align-items: center;
  }

  .workflow-flow-node {
    flex-basis: 84vw;
  }
}

.opening-hours-builder {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.opening-hours-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 130px 130px;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 12px;
}

.opening-hours-row label:not(.checkbox-line) {
  display: grid;
  gap: 5px;
}

.tribunal-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.tribunal-summary article {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 14px;
}

.tribunal-summary strong,
.tribunal-summary span {
  display: block;
}

.tribunal-summary strong {
  color: var(--heading);
  font-size: 24px;
}

.tribunal-summary span {
  margin-top: 4px;
  color: #667887;
  font-size: 13px;
}

.tribunal-table {
  min-width: 1180px;
}

.tribunal-likelihood {
  display: grid;
  gap: 5px;
  min-width: 240px;
}

.tribunal-likelihood strong {
  color: var(--heading);
  font-size: 20px;
}

.tribunal-likelihood span:last-child {
  color: #667887;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .technology-stack-grid,
  .delegate-gmail-shell,
  .delegate-gmail-header,
  .delegate-gmail-connect,
  .technology-settings-row,
  .tech-settings-fields {
    grid-template-columns: 1fr;
  }

  .workflow-panel dl,
  .action-summary-grid,
  .maintenance-form-grid,
  .document-row,
  .proposal-status-grid,
  .proposal-public-grid,
  .proposal-public-grid dl,
  .proposal-input-modal .portal-modal-fields,
  .workflow-settings-layout,
  .workflow-builder-layout,
  .workflow-builder-metrics,
  .workflow-builder-hero,
  .workflow-builder-titlebar,
  .workflow-type-grid,
  .workflow-command-summary,
  .workflow-meta-grid,
  .workflow-allocation-builder,
  .workflow-log-grid,
  .workflow-edit-row,
  .workflow-step-title-row,
  .workflow-template-grid,
  .compliance-expiry-grid,
  .certificate-file-card,
  .cpd-add-row,
  .opening-hours-row,
  .tribunal-summary,
  .dashboard-role-control,
  .page-title-row {
    grid-template-columns: 1fr;
  }

  .page-title-row,
  .dashboard-role-control,
  .workflow-builder-hero,
  .workflow-builder-titlebar {
    display: grid;
  }

  .maintenance-accordion-head {
    min-height: 54px;
    padding: 11px 12px;
  }

  .maintenance-accordion-body {
    padding: 12px;
  }

  .maintenance-next-action-head {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .maintenance-next-action-head .button {
    justify-content: center;
    width: auto;
  }

  .maintenance-next-action-head-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
  }

  .maintenance-next-action-head-actions .button {
    flex: 1;
  }

  .maintenance-stage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .maintenance-stage-strip span {
    min-height: 28px;
    padding: 5px 7px;
    font-size: 10px;
  }

  .maintenance-action-choice-grid {
    grid-template-columns: 1fr;
  }

  .maintenance-action-choice-grid button {
    min-height: 50px;
  }

  .maintenance-status-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .maintenance-status-row.has-document {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
  }

  .maintenance-status-pdf {
    min-height: 50px;
  }

  .maintenance-status-row .maintenance-workflow-menu-button {
    width: 42px;
  }

  .maintenance-action-options {
    grid-template-columns: 1fr;
  }

  .quote-paper div {
    grid-template-columns: 1fr;
  }

  .quote-paper dl {
    grid-template-columns: 1fr;
  }

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

  .quote-row .badge {
    grid-column: 2;
    width: fit-content;
  }

  .quote-row small {
    grid-column: 1 / -1;
    text-align: left;
  }

  .quote-row i {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .quote-decision-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quote-decision-actions .button,
  .quote-decision-actions .primary-action {
    width: 100%;
    justify-content: center;
  }

  .primary-action {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile shell and table containment */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    width: 100vw;
  }

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

  .app-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .app-body {
    display: block;
    min-width: 0;
    min-height: 100dvh;
    overflow: visible;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 8000;
    width: 100%;
    height: 64px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    padding: 9px 12px;
  }

  .mobile-menu-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    color: #263641;
  }

  .mobile-menu-button svg {
    width: 20px;
    height: 20px;
  }

  .global-search-wrap {
    width: 100%;
    min-width: 0;
  }

  .global-search {
    width: 100%;
    height: 42px;
    min-width: 0;
    border-radius: var(--radius-md);
  }

  .universal-search-panel {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .topbar-actions {
    min-width: max-content;
    justify-content: end;
    gap: 7px;
  }

  .icon-button,
  .top-profile-button {
    width: 42px;
    height: 42px;
  }

  .side-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(286px, calc(100vw - 44px));
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    background: #f4f6f8;
    padding: 14px 8px;
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 18px 0 40px rgba(20, 33, 44, .16);
  }

  .app-shell.mobile-menu-open .side-nav {
    transform: translateX(0);
  }

  .app-shell.mobile-menu-open .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    border: 0;
    background: rgba(14, 24, 31, .32);
  }

  .side-brand {
    display: block;
    padding: 0 8px 14px;
  }

  .side-brand img {
    width: 130px;
    margin: 0;
  }

  .side-nav nav {
    width: 100%;
    display: grid;
    gap: 3px;
    overflow: visible;
  }

  .side-nav nav button,
  .side-nav nav a {
    width: 100%;
    min-width: 0;
    height: 40px;
    justify-content: flex-start;
    padding: 0 12px;
  }

  .side-nav nav span,
  .sidebar-profile div {
    display: block;
  }

  .sidebar-profile {
    display: flex;
    justify-content: flex-start;
    padding: 12px 8px 0;
  }

  .workspace {
    width: 100%;
    max-width: 100vw;
    padding: 22px 16px 32px;
    overflow-x: hidden;
  }

  .table-workspace {
    height: calc(100dvh - 64px);
    min-height: 0;
    overflow: hidden;
    padding-bottom: 16px;
  }

  .table-workspace .page-header {
    flex: 0 0 auto;
  }

  .page-section {
    min-width: 0;
    overflow: hidden;
  }

  .table-workspace .page-section {
    min-height: 0;
  }

  .page-title-row,
  .page-title-actions {
    width: 100%;
    min-width: 0;
  }

  .maintenance-invoice-email {
    display: none;
  }

  .page-header h1 {
    font-size: 24px;
    line-height: 1.14;
  }

  .tabs {
    max-width: 100%;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 1px;
  }

  .filter-bar,
  .live-filter-bar,
  .maintenance-toolbar-row {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .filter-search {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .filter-search .list-search {
    width: 100%;
    min-width: 0;
  }

  .filter-bar > div,
  .live-filter-bar > div,
  .maintenance-toolbar-row > div {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: end;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .shared-table-toolbar .table-control-panel {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .table-control-actions,
  .table-control-group,
  .table-control-menu {
    width: 100%;
    min-width: 0;
  }

  .table-control-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .table-control-group-label {
    grid-column: 1 / -1;
    position: static;
    margin-bottom: -2px;
  }

  .table-control-menu-trigger {
    width: 100%;
    min-height: 38px;
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .table-control-menu-panel,
  .table-control-menu-filter .table-control-menu-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }

  .table-control-menu-grid,
  .table-colour-preview {
    grid-template-columns: 1fr;
  }

  .table-colour-rule {
    grid-template-columns: 1fr;
  }

  .table-colour-rule-remove {
    width: 100%;
  }

  .filter-select {
    flex: 0 0 126px;
    min-width: 126px;
  }

  .filter-select select {
    width: 100%;
    height: 38px;
  }

  .filter-bar .button {
    flex: 0 0 auto;
    height: 38px;
  }

  .table-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-workspace .table-frame {
    flex: 1 1 auto;
    min-height: 220px;
  }

  .data-table {
    width: max-content;
    min-width: 760px;
  }

  .data-table th,
  .data-table td {
    white-space: normal;
  }

  .property-active-table th,
  .property-active-table td {
    white-space: nowrap;
  }

  .table-link {
    max-width: 260px;
  }

  .dashboard-metrics,
  .pulse-grid,
  .dashboard-grid,
  .dashboard-operations-grid,
  .delegate-operations-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-command-header {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .dashboard-command-actions {
    justify-content: flex-start;
  }

  .technology-stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .support-mode-banner {
    align-items: stretch;
    padding: 7px max(12px, var(--safe-right)) 7px max(12px, var(--safe-left));
  }

  .support-mode-banner > div {
    flex: 1 1 auto;
  }

  .support-mode-banner .button {
    width: auto;
    white-space: nowrap;
  }

  .technology-stack-grid a {
    min-height: 52px;
    padding: 8px;
  }

  .technology-stack-grid strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .record-toolbar {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 18px;
    padding-bottom: 2px;
  }

  .record-toolbar button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .filter-bar > div,
  .live-filter-bar > div,
  .maintenance-toolbar-row > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .shared-table-toolbar .table-control-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .table-control-actions,
  .table-control-group,
  .table-control-menu {
    min-height: 0;
  }

  .table-control-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }

  .table-control-group,
  .table-control-group-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    padding-top: 8px;
  }

  .table-control-group-label {
    grid-column: 1 / -1;
    position: static;
    margin-bottom: -2px;
  }

  .table-control-menu-trigger {
    width: 100%;
    min-height: 38px;
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .table-control-menu-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }

  .table-control-menu-filter .table-control-menu-panel {
    width: 100%;
  }

  .table-control-menu-grid,
  .table-colour-preview {
    grid-template-columns: 1fr;
  }

  .table-colour-rule {
    grid-template-columns: 1fr;
  }

  .table-colour-rule-remove {
    width: 100%;
  }

  .filter-select {
    width: 100%;
    min-width: 0;
    flex: initial;
  }

  .filter-select span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .filter-bar .button {
    width: 100%;
    flex: initial;
    justify-content: center;
  }

  .portal-modal-backdrop {
    align-items: start;
    justify-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  .portal-request-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }

  .portal-request-modal header {
    position: sticky;
    top: -14px;
    z-index: 2;
    background: #fff;
  }

  .portal-request-modal footer {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
    padding-top: 12px;
  }

  .portal-request-modal footer .button {
    width: 100%;
    justify-content: center;
  }

  .supplier-upload-context {
    grid-template-columns: 1fr;
  }

  .portal-modal-fields {
    min-height: 0;
  }

  .tenant-maintenance-modal .portal-modal-fields {
    grid-template-columns: 1fr;
  }

  .global-live-status {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .delegate-gmail-workspace {
    height: auto;
    min-height: calc(100dvh - 64px);
    overflow: visible;
  }

  .delegate-gmail-header,
  .delegate-gmail-connect,
  .delegate-gmail-message header {
    display: grid;
  }

  .delegate-gmail-brand,
  .delegate-gmail-account {
    min-width: 0;
  }

  .delegate-gmail-account {
    justify-content: start;
  }

  .delegate-gmail-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 14px;
  }

  .delegate-gmail-rail {
    grid-template-rows: auto auto;
    border-bottom: 1px solid #eef0f4;
    padding: 10px;
  }

  .delegate-gmail-compose-button {
    width: 100%;
    justify-content: center;
    margin: 0;
  }

  .delegate-gmail-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .delegate-gmail-tabs button {
    border-radius: 999px;
    padding-left: 14px;
  }

  .delegate-gmail-labels {
    display: none;
  }

  .delegate-gmail-list {
    min-height: 360px;
    border-left: 0;
    border-right: 0;
  }

  .delegate-gmail-reader {
    min-height: 420px;
  }

  .delegate-gmail-row {
    grid-template-columns: 18px minmax(90px, .8fr) minmax(0, 1.2fr) 62px;
  }

  .delegate-gmail-row b,
  .delegate-gmail-row em {
    display: none;
  }

  .delegate-gmail-body-frame {
    min-height: 430px;
  }
}

@media (max-width: 360px) {
  .filter-bar > div,
  .live-filter-bar > div,
  .maintenance-toolbar-row > div {
    grid-template-columns: 1fr;
  }
}

/* Public homepage v3 */
.public-site {
  --public-green: #103334;
  --public-green-2: #163f3f;
  --public-mint: #7bd982;
  --public-ink: #14202a;
  --public-muted: #6e7f8b;
  --public-line: #dbe6e8;
  --public-soft: #f5f8f7;
  min-height: 100vh;
  background: #fff;
  color: var(--public-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.public-site .public-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(219, 230, 232, .78);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  padding: 18px clamp(22px, 4.6vw, 70px);
}

.public-site .public-logo img {
  width: 174px;
  height: auto;
  display: block;
}

.public-site .public-nav nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.public-site .public-nav nav a,
.public-site .public-nav nav button,
.public-site .public-footer a {
  border: 0;
  background: transparent;
  color: #30444f;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}

.public-site .public-nav nav a:hover,
.public-site .public-footer a:hover {
  color: var(--public-green);
}

.public-site .public-nav nav button,
.public-site .public-primary {
  border: 1px solid var(--public-green);
  border-radius: 999px;
  background: var(--public-green);
  color: #fff;
  box-shadow: 0 16px 34px rgba(16, 51, 52, .16);
}

.public-site .public-nav nav button {
  min-height: 42px;
  padding: 0 18px;
}

.public-site .public-nav .public-signin,
.public-site .public-secondary {
  border: 1px solid #cbdadd;
  border-radius: 999px;
  background: #fff;
  color: var(--public-green);
}

.public-site .public-nav .public-signin {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
}

.public-site .public-primary,
.public-site .public-secondary {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 760;
  text-decoration: none;
}

.public-site .public-primary:hover {
  background: #0d2829;
  border-color: #0d2829;
  transform: translateY(-1px);
}

.public-site .public-secondary:hover {
  border-color: var(--public-green);
  background: #f6fbf8;
}

.public-site .public-hero,
.public-site .public-section,
.public-site .public-footer {
  width: min(1180px, calc(100% - 44px));
  margin-inline: auto;
}

.public-site .public-hero {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
  padding: clamp(40px, 5.4vw, 68px) 0 30px;
}

.public-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: var(--public-ink);
  font-size: clamp(54px, 7vw, 92px);
  font-weight: 760;
  line-height: .94;
  letter-spacing: 0;
}

.public-hero-copy p {
  max-width: 620px;
  margin: 28px 0 0;
  color: #4f6470;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 430;
  line-height: 1.55;
}

.public-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.public-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 34px;
}

.public-hero-proof span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe6e8;
  border-radius: 999px;
  background: #fff;
  color: #4d606a;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 660;
}

.public-hero-proof span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--public-mint);
}

.public-hero-board {
  position: relative;
  display: grid;
  gap: 12px;
  border: 1px solid #d4e2e5;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
  padding: 16px;
  box-shadow: 0 36px 80px rgba(22, 45, 53, .16);
}

.public-hero-board::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border-radius: 30px;
  background: #dff5e8;
  transform: rotate(-2.5deg);
}

.public-board-top,
.public-board-feature,
.public-board-grid article,
.public-workflow-lines span,
.public-proof-list article,
.public-experience article,
.public-property-card,
.public-property-rail article,
.public-article-row article,
.public-blog-list article {
  border: 1px solid #dce7e9;
  border-radius: 18px;
  background: #fff;
}

.public-board-top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
}

.public-board-top span {
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: radial-gradient(circle at 70% 40%, #7bd982 0 18%, #103334 19% 48%, #dff5e8 49% 100%);
}

.public-board-top strong,
.public-workflow-lines strong,
.public-proof-list strong,
.public-property-rail strong,
.public-experience h2 {
  color: #1b2b35;
  font-size: 14px;
  font-weight: 760;
}

.public-board-top em {
  border-radius: 999px;
  background: #edf7f1;
  color: #27713d;
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.public-board-feature {
  padding: 18px;
}

.public-board-feature-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  background: #f3fbf5;
  border-color: #ccebd3;
}

.public-board-feature h2 {
  margin: 0;
  color: var(--public-green);
  font-size: 25px;
  font-weight: 760;
}

.public-board-feature p {
  margin: 7px 0 0;
  color: #5c7180;
  font-size: 14px;
  line-height: 1.45;
}

.public-board-feature-main > strong {
  color: var(--public-green);
  font-size: 46px;
  line-height: .9;
}

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

.public-board-grid article {
  min-height: 76px;
  padding: 12px;
}

.public-board-grid strong {
  display: block;
  color: var(--public-ink);
  font-size: 25px;
  font-weight: 780;
}

.public-board-grid span,
.public-workflow-lines em,
.public-proof-list span,
.public-experience p,
.public-property-rail span,
.public-article-row p,
.public-blog-list p,
.public-form-message {
  color: var(--public-muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.public-workflow-lines span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 12px;
  padding: 10px 12px;
}

.public-workflow-lines i {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef8f0;
  border: 7px solid #fff;
  box-shadow: 0 0 0 1px #cfead5;
}

.public-workflow-lines em {
  margin-top: 3px;
  font-style: normal;
}

.public-section {
  padding: clamp(54px, 7vw, 92px) 0;
}

.public-proof-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--public-line);
  border-bottom: 1px solid var(--public-line);
  padding: 24px 0;
}

.public-proof-strip span {
  color: #40515c;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 690;
  line-height: 1.25;
}

.public-proof-strip span:last-child {
  color: #667680;
  font-weight: 470;
}

.public-split,
.public-property {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}

.public-section h2 {
  margin: 0;
  color: var(--public-ink);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 740;
  line-height: 1.03;
  letter-spacing: 0;
}

.public-section p {
  margin: 18px 0 0;
  color: #5c7080;
  font-size: 17px;
  line-height: 1.6;
}

.public-proof-list,
.public-property-rail,
.public-article-row,
.public-blog-list {
  display: grid;
  gap: 12px;
}

.public-proof-list article {
  padding: 20px;
}

.public-proof-list span,
.public-property-rail span {
  display: block;
  margin-top: 6px;
}

.public-system {
  display: grid;
  gap: 30px;
  border-radius: 30px;
  background: var(--public-green);
  color: #fff;
  padding: clamp(34px, 5vw, 58px);
}

.public-system h2,
.public-demo-band h2 {
  color: #fff;
}

.public-system-copy p,
.public-demo-band p {
  color: rgba(255, 255, 255, .76);
}

.public-system-flow {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.public-system-flow span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 730;
}

.public-system-flow i {
  height: 1px;
  background: rgba(255, 255, 255, .25);
}

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

.public-experience article {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.public-experience h2 {
  margin: 0;
  font-size: 24px;
}

.public-property-card {
  padding: clamp(24px, 4vw, 42px);
  background: #f5faf6;
  border-color: #d2ead7;
}

.public-property-card h2 {
  font-size: clamp(32px, 3.4vw, 48px);
}

.public-property-rail article {
  padding: 20px;
}

.public-demo-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-radius: 30px;
  background: linear-gradient(135deg, #103334, #183f3f);
  padding: clamp(30px, 5vw, 54px);
}

.public-blog-preview .section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.public-blog-preview .section-heading a {
  color: var(--public-green);
  font-weight: 760;
  text-decoration: none;
}

.public-article-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-article-row article,
.public-blog-list article {
  padding: 22px;
}

.public-article-row article > span,
.public-blog-list article > span {
  color: var(--public-green);
  font-size: 12px;
  font-weight: 760;
}

.public-article-row h3,
.public-blog-list h2 {
  margin: 12px 0 0;
  color: var(--public-ink);
  font-size: 20px;
  line-height: 1.2;
}

.public-footer {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--public-line);
  color: #667680;
}

.public-modal {
  border-radius: 24px;
  box-shadow: 0 32px 90px rgba(14, 32, 42, .22);
}

.public-demo-form input,
.public-demo-form textarea {
  border-radius: 12px;
}

@media (max-width: 980px) {
  .public-site .public-nav {
    padding-inline: 18px;
  }

  .public-site .public-nav nav {
    gap: 10px;
  }

  .public-site .public-nav nav a:not(.public-signin) {
    display: none;
  }

  .public-site .public-hero,
  .public-split,
  .public-property,
  .public-proof-strip,
  .public-demo-band {
    grid-template-columns: 1fr;
  }

  .public-site .public-hero {
    min-height: 0;
    padding-top: 44px;
  }

  .public-hero-board {
    min-width: 0;
  }

  .public-experience,
  .public-article-row {
    grid-template-columns: 1fr;
  }

  .public-system-flow {
    grid-template-columns: 1fr;
  }

  .public-system-flow i {
    display: none;
  }
}

@media (max-width: 620px) {
  .portal-signup-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-site .public-nav {
    gap: 12px;
  }

  .public-site .public-logo img {
    width: 138px;
  }

  .public-site .public-nav nav button {
    display: none;
  }

  .public-site .public-nav .public-signin {
    min-height: 38px;
    padding: 0 13px;
  }

  .public-site .public-hero,
  .public-site .public-section,
  .public-site .public-footer {
    width: min(100% - 28px, 1180px);
  }

  .public-hero-copy h1 {
    font-size: 48px;
  }

  .public-hero-copy p {
    font-size: 17px;
  }

  .public-primary,
  .public-secondary {
    width: 100%;
  }

  .public-board-grid {
    grid-template-columns: 1fr;
  }

  .public-board-feature-main {
    grid-template-columns: 1fr;
  }

  .public-demo-band {
    border-radius: 22px;
  }
}

/* Public homepage v4 - supplied concept */
.public-site {
  --public-green: #0d3534;
  --public-green-dark: #062a2a;
  --public-green-soft: #e8f7ef;
  --public-mint: #79d77c;
  --public-ink: #082d2f;
  --public-text: #213742;
  --public-muted: #687b84;
  --public-line: #dfe8eb;
  --public-panel: #f7fafb;
  min-height: 100vh;
  background: #fff;
  color: var(--public-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.public-site .public-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--public-line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  padding: 14px clamp(28px, 3.3vw, 64px);
}

.public-site .public-logo img {
  width: 148px;
  height: auto;
  display: block;
}

.public-site .public-logo {
  position: relative;
  width: fit-content;
}

.public-site .public-nav nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 3vw, 46px);
}

.public-site .public-nav nav a,
.public-site .public-nav nav button,
.public-site .public-footer a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #0f2630;
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.public-site .public-nav nav a svg {
  width: 11px;
  height: 11px;
  transform: rotate(180deg);
}

.public-site .public-nav nav button {
  min-width: 128px;
  justify-content: center;
  border: 1px solid var(--public-green);
  border-radius: 8px;
  background: var(--public-green);
  color: #fff;
  box-shadow: none;
  padding: 0 18px;
}

.public-site .public-nav .public-signin {
  min-width: 106px;
  justify-content: center;
  border: 1px solid #0a2e32;
  border-radius: 8px;
  background: #fff;
  color: #092d30;
  padding: 0 18px;
}

@media (max-width: 1120px) and (min-width: 901px) {
  .public-site .public-hero {
    grid-template-columns: 1fr;
  }

  .public-hero-stage {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .public-product-window {
    min-height: 318px;
  }

  .public-hero-sidecards {
    grid-template-columns: 1fr;
  }
}

.public-site .public-hero,
.public-logo-strip,
.public-feature-strip,
.public-card-row,
.public-insights-section,
.public-demo-panel,
.public-site .public-footer {
  width: min(1340px, calc(100% - 76px));
  margin-inline: auto;
}

.public-site .public-hero {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(410px, .9fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(30px, 4vw, 70px);
  padding: 38px 0 30px;
}

.public-hero-copy h1 {
  max-width: 560px;
  margin: 0;
  color: var(--public-ink);
  font-size: clamp(54px, 4.6vw, 76px);
  font-weight: 780;
  line-height: .98;
  letter-spacing: 0;
}

.public-hero-copy p {
  max-width: 545px;
  margin: 22px 0 0;
  color: #415760;
  font-size: 17px;
  line-height: 1.55;
}

.public-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
}

.public-primary,
.public-secondary,
.public-demo-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}

.public-primary,
.public-demo-cta {
  border: 1px solid var(--public-green);
  background: var(--public-green);
  color: #fff;
  box-shadow: 0 14px 26px rgba(13, 53, 52, .18);
}

.public-primary svg,
.public-demo-cta svg {
  width: 16px;
  height: 16px;
}

.public-secondary {
  min-width: 110px;
  border: 1px solid #0b3033;
  background: #fff;
  color: #0b3033;
}

.public-hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 620px;
  margin-top: 36px;
}

.public-hero-proof span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0 12px;
  align-items: center;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--public-text);
  padding: 0;
}

.public-hero-proof svg {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e6f7ed;
  color: var(--public-green);
  padding: 10px;
}

.public-hero-proof strong,
.public-hero-proof em {
  display: block;
  grid-column: 2;
}

.public-hero-proof strong {
  color: #14343a;
  font-size: 13px;
  font-weight: 780;
}

.public-hero-proof em {
  margin-top: 4px;
  color: var(--public-muted);
  font-size: 12px;
  font-style: normal;
}

.public-hero-stage {
  position: relative;
  min-height: 350px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: center;
}

.public-product-window {
  position: relative;
  min-height: 318px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  overflow: visible;
  border: 7px solid #0b3737;
  border-radius: 13px;
  background: linear-gradient(135deg, #052c2d, #0b3939);
  box-shadow: 0 18px 34px rgba(20, 50, 55, .18), 0 1px 0 rgba(255, 255, 255, .6) inset;
  transform-origin: 52% 64%;
  animation: publicDeviceFloat 9s ease-in-out infinite;
}

.public-product-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 7px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .18), transparent 34%, transparent 68%, rgba(255, 255, 255, .08));
  mix-blend-mode: screen;
}

.public-laptop-shadow {
  position: absolute;
  left: 18px;
  right: 198px;
  bottom: -17px;
  z-index: -1;
  height: 24px;
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at center, rgba(10, 30, 34, .28), transparent 70%);
}

.public-product-window aside {
  display: grid;
  align-content: start;
  gap: 10px;
  background: linear-gradient(180deg, #073a38, #052928);
  color: #dff5e8;
  padding: 18px 14px;
}

.public-product-window aside .mini-logo {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(circle at 70% 42%, #a9eea7 0 18%, transparent 19% 35%), conic-gradient(#7bd982 0 25%, #fff 25% 36%, #7bd982 36% 62%, #fff 62% 72%, #7bd982 72% 100%);
}

.public-product-window aside b {
  position: absolute;
  top: 22px;
  left: 48px;
  color: #fff;
  font-size: 12px;
}

.public-product-window aside em {
  min-height: 24px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  color: #d7e8e5;
  padding: 0 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.public-product-window aside em:first-of-type {
  margin-top: 10px;
  background: #07836d;
  color: #fff;
}

.public-product-window > section {
  padding: 24px 28px 22px;
}

.product-screen {
  position: relative;
  overflow: hidden;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #fbfdfd 0%, #f5f8fa 100%);
}

.product-browser-bar {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #e6eef0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  margin: -7px 0 14px;
  padding: 0 9px;
}

.product-browser-bar span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d7e3e6;
}

.product-browser-bar span:first-child {
  background: #ff756c;
}

.product-browser-bar span:nth-child(2) {
  background: #ffc85a;
}

.product-browser-bar span:nth-child(3) {
  background: #68ce7a;
}

.product-browser-bar b {
  min-width: 0;
  flex: 1;
  border-radius: 999px;
  background: #eef4f5;
  color: #87989f;
  margin-left: 6px;
  padding: 3px 10px;
  font-size: 8px;
  font-weight: 720;
  text-align: center;
}

.public-product-window header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.public-product-window header strong {
  display: block;
  color: #1c3039;
  font-size: 17px;
  font-weight: 780;
}

.public-product-window header span {
  display: block;
  margin-top: 4px;
  color: #7c8c94;
  font-size: 10px;
}

.public-product-window header i {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3ccac, #1e4952);
}

.product-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.product-metrics article,
.product-work > div,
.public-phone,
.public-hero-sidecards article,
.workflow-mini,
.invoice-mini,
.portal-mini {
  border: 1px solid #dfe8eb;
  border-radius: 8px;
  background: #fff;
}

.product-metrics article {
  min-height: 76px;
  padding: 12px;
  animation: publicMetricLift 8s ease-in-out infinite;
}

.product-metrics article:nth-child(2) {
  animation-delay: 1.1s;
}

.product-metrics article:nth-child(3) {
  animation-delay: 2.2s;
}

.product-metrics article:nth-child(4) {
  animation-delay: 3.3s;
}

.product-metrics strong,
.product-metrics span,
.product-metrics em {
  display: block;
}

.product-metrics strong {
  color: #122c35;
  font-size: 18px;
}

.product-metrics span,
.product-metrics em,
.product-work span,
.product-work em {
  color: #657b86;
  font-size: 9px;
  font-style: normal;
}

.product-metrics em {
  margin-top: 7px;
  color: #c43b2d;
}

.product-work {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
  gap: 12px;
  margin-top: 14px;
}

.product-work > div {
  padding: 12px;
}

.product-work h3 {
  margin: 0 0 8px;
  color: #223b44;
  font-size: 11px;
}

.product-work p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 54px;
  gap: 8px;
  align-items: center;
  border-top: 1px solid #edf2f3;
  margin: 0;
  padding: 9px 0;
  animation: publicRowFocus 7s ease-in-out infinite;
}

.product-work p:nth-of-type(2) {
  animation-delay: 1.4s;
}

.product-work p:nth-of-type(3) {
  animation-delay: 2.8s;
}

.product-work > div:nth-child(2) p:nth-of-type(1) {
  animation-delay: .8s;
}

.product-work > div:nth-child(2) p:nth-of-type(2) {
  animation-delay: 1.8s;
}

.product-work > div:nth-child(2) p:nth-of-type(3) {
  animation-delay: 2.8s;
}

.product-work > div:nth-child(2) p:nth-of-type(4) {
  animation-delay: 3.8s;
}

.product-work p b {
  color: #263d46;
  font-size: 10px;
}

.product-work button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--public-green);
  font-size: 10px;
  font-weight: 760;
}

.public-phone {
  position: absolute;
  right: 132px;
  bottom: -12px;
  z-index: 2;
  width: 152px;
  min-height: 242px;
  border: 5px solid #11191c;
  border-radius: 26px;
  padding: 14px 10px 12px;
  box-shadow: 0 16px 32px rgba(10, 28, 31, .24);
  animation: publicPhoneFloat 7s ease-in-out infinite;
}

.public-phone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #121a1d;
  transform: translateX(-50%);
}

.public-phone header {
  color: #142d35;
  font-size: 9px;
  font-weight: 800;
}

.public-phone strong {
  display: block;
  margin-top: 14px;
  color: #17333a;
  font-size: 12px;
}

.public-phone nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #dfe8eb;
  margin: 9px 0 6px;
}

.public-phone nav span {
  color: #63816f;
  padding-bottom: 6px;
  font-size: 8px;
  font-weight: 800;
}

.public-phone article {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid #eef3f4;
  padding: 10px 0;
}

.public-phone article b {
  color: #1e363f;
  font-size: 9px;
}

.public-phone article span {
  width: fit-content;
  border-radius: 999px;
  background: #fff0ee;
  color: #d85645;
  padding: 2px 5px;
  font-size: 7px;
  font-weight: 800;
}

.public-hero-sidecards {
  display: grid;
  gap: 14px;
}

.public-hero-sidecards article {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  box-shadow: 0 14px 28px rgba(20, 48, 55, .08);
  animation: publicSideCardPulse 8s ease-in-out infinite;
}

.public-hero-sidecards article:nth-child(2) {
  animation-delay: 1.4s;
}

.public-hero-sidecards article:nth-child(3) {
  animation-delay: 2.8s;
}

.public-hero-sidecards article:first-child {
  background: #effaf4;
}

.public-hero-sidecards article:nth-child(2) {
  background: #f2f6fb;
}

.public-hero-sidecards article:nth-child(3) {
  background: #fff;
}

.public-hero-sidecards strong {
  color: #13393b;
  font-size: 14px;
}

.public-hero-sidecards span {
  color: #4f6470;
  font-size: 12px;
}

.ai-preview-card span {
  display: flex;
  align-items: center;
}

.public-hero-sidecards small {
  display: block;
  color: #6a7d86;
  font-size: 10px;
  font-weight: 680;
}

.public-hero-sidecards button {
  width: fit-content;
  min-height: 34px;
  border: 1px solid #0d3534;
  border-radius: 7px;
  background: #fff;
  color: #0d3534;
  padding: 0 14px;
  font-weight: 760;
}

.public-hero-sidecards i {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #dff6e8;
  vertical-align: middle;
  margin-right: 6px;
  animation: publicAiDot 1.8s ease-in-out infinite;
}

.public-hero-sidecards span b {
  color: inherit;
  font-size: inherit;
  font-weight: 720;
  white-space: nowrap;
}

.public-hero-sidecards em {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--public-green) 0 20%, #72d875 36%, var(--public-green) 58%, #dfe8eb 60% 100%);
  background-size: 190% 100%;
  animation: publicAiProgress 3.2s ease-in-out infinite;
}

@keyframes publicDeviceFloat {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg);
  }

  50% {
    transform: translateY(-5px) rotateX(.8deg);
  }
}

@keyframes publicPhoneFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes publicMetricLift {
  0%,
  70%,
  100% {
    background: #fff;
    box-shadow: none;
    transform: translateY(0);
  }

  18% {
    background: #f6fbf8;
    box-shadow: 0 10px 18px rgba(13, 53, 52, .08);
    transform: translateY(-3px);
  }
}

@keyframes publicRowFocus {
  0%,
  74%,
  100% {
    background: transparent;
    padding-inline: 0;
  }

  18% {
    border-radius: 7px;
    background: #f3faf6;
    padding-inline: 8px;
  }
}

@keyframes publicSideCardPulse {
  0%,
  72%,
  100% {
    box-shadow: 0 14px 28px rgba(20, 48, 55, .08);
    transform: translateY(0);
  }

  18% {
    box-shadow: 0 18px 34px rgba(13, 53, 52, .14);
    transform: translateY(-3px);
  }
}

@keyframes publicAiDot {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(121, 215, 124, .3);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(121, 215, 124, 0);
    transform: scale(1.08);
  }
}

@keyframes publicAiProgress {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.public-logo-strip {
  border-top: 1px solid var(--public-line);
  border-bottom: 1px solid var(--public-line);
  padding: 22px 0 26px;
  text-align: center;
}

.public-logo-strip p {
  margin: 0 0 22px;
  color: #75848b;
  font-size: 14px;
  font-weight: 650;
}

.public-logo-strip div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 30px;
}

.public-logo-strip span {
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  gap: 3px;
  color: #2c3e45;
  filter: saturate(.94);
}

.public-logo-strip img {
  display: block;
  width: auto;
  max-width: 142px;
  max-height: 44px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.public-logo-strip .public-logo-dark {
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #102627;
  filter: none;
}

.public-logo-strip .public-logo-dark img {
  max-height: 26px;
  mix-blend-mode: normal;
}

.public-logo-strip .public-logo-professionals {
  grid-template-columns: 22px minmax(0, 106px);
  gap: 9px;
}

.public-logo-strip .public-logo-professionals img:first-child {
  max-width: 22px;
  max-height: 27px;
}

.public-logo-strip .public-logo-professionals img:last-child {
  max-width: 106px;
  max-height: 20px;
}

.public-logo-strip .public-logo-wordmark {
  grid-template-columns: 30px auto;
  justify-content: center;
  column-gap: 9px;
  text-align: left;
}

.public-logo-strip .public-logo-wordmark img {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  max-width: none;
  max-height: none;
}

.public-logo-strip .public-logo-wordmark b,
.public-logo-strip .public-logo-wordmark em {
  line-height: 1;
}

.public-logo-strip .public-logo-wordmark b {
  font-size: 20px;
}

.public-logo-strip .public-logo-wordmark em {
  margin-top: -2px;
}

.public-logo-strip b {
  display: block;
  font-size: 25px;
  line-height: 1;
}

.public-logo-strip em {
  display: block;
  margin-top: 2px;
  color: #7e8b91;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.public-feature-strip {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(5, minmax(120px, 1fr));
  gap: 24px;
  border-bottom: 1px solid var(--public-line);
  padding: 32px 0 34px;
}

.public-feature-strip > div h2 {
  margin: 0;
  color: #081f27;
  font-size: 28px;
  font-weight: 780;
  line-height: 1.08;
}

.public-feature-strip > div p {
  max-width: 255px;
  margin: 12px 0;
  color: #5b6d75;
  font-size: 13px;
  line-height: 1.48;
}

.public-feature-strip a,
.public-card-row a,
.public-insights-intro a {
  color: #0d3534;
  font-size: 13px;
  font-weight: 780;
  text-decoration: none;
}

.public-feature-strip a svg,
.public-card-row a svg,
.public-insights-intro a svg {
  width: 13px;
  height: 13px;
}

.public-feature-strip article {
  display: grid;
  align-content: start;
  gap: 10px;
  border-left: 1px solid var(--public-line);
  padding-left: 24px;
}

.public-feature-strip article svg {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #e8f5f1;
  color: #0d3534;
  padding: 11px;
}

.public-feature-strip strong {
  color: #0d252d;
  font-size: 14px;
}

.public-feature-strip span {
  color: #6b7d85;
  font-size: 12px;
}

.public-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 28px 0;
}

.public-card-row > article {
  min-height: 154px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(170px, 1fr);
  gap: 18px;
  border: 1px solid #e5ecef;
  border-radius: 12px;
  background: #f7f9fa;
  padding: 22px;
}

.public-card-row h2 {
  margin: 0;
  color: #133036;
  font-size: 18px;
}

.public-card-row p {
  margin: 8px 0 14px;
  color: #5f7179;
  font-size: 12px;
  line-height: 1.45;
}

.workflow-mini {
  align-self: center;
  display: grid;
  gap: 10px;
  padding: 18px;
  box-shadow: 0 12px 24px rgba(21, 50, 56, .08);
}

.workflow-mini span {
  position: relative;
  display: block;
  color: #4c5f67;
  padding-left: 24px;
  font-size: 11px;
  font-weight: 650;
}

.workflow-mini span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #2eba55;
}

.invoice-mini,
.portal-mini {
  align-self: center;
  display: grid;
  gap: 8px;
  padding: 18px;
  box-shadow: 0 12px 24px rgba(21, 50, 56, .08);
}

.invoice-mini strong,
.portal-mini strong {
  color: #1d333b;
  font-size: 12px;
  text-align: center;
}

.invoice-mini p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: #6b7b82;
  font-size: 11px;
}

.invoice-mini em {
  width: fit-content;
  border-radius: 999px;
  background: #dff5e8;
  color: #2e7b47;
  padding: 5px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.portal-mini span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #edf2f3;
  border-radius: 8px;
  color: #546a73;
  padding: 8px 10px;
  font-size: 11px;
}

.public-insights-section {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 34px;
  border-top: 1px solid var(--public-line);
  padding: 34px 0 22px;
}

.public-insights-intro h2 {
  margin: 0;
  color: #102c33;
  font-size: 18px;
  line-height: 1.15;
}

.public-insights-intro p {
  margin: 12px 0 22px;
  color: #5e7078;
  font-size: 13px;
  line-height: 1.48;
}

.public-article-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-article-row article {
  overflow: hidden;
  border: 1px solid #e3eaed;
  border-radius: 8px;
  background: #fff;
}

.article-image {
  height: 120px;
  border-bottom: 1px solid #e3eaed;
}

.article-image-1 {
  background: linear-gradient(135deg, rgba(13, 53, 52, .12), rgba(13, 53, 52, .02)), url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=960&q=80") center/cover;
}

.article-image-2 {
  background: linear-gradient(135deg, rgba(13, 53, 52, .12), rgba(13, 53, 52, .02)), url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=960&q=80") center/cover;
}

.article-image-3 {
  background: linear-gradient(135deg, rgba(13, 53, 52, .12), rgba(13, 53, 52, .02)), url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=960&q=80") center/cover;
}

.public-article-row article > span,
.public-article-row h3,
.public-article-row p,
.public-article-row em {
  display: block;
  margin-inline: 16px;
}

.public-article-row article > span {
  width: fit-content;
  border: 1px solid #f1d4ba;
  border-radius: 4px;
  color: #6c325e;
  margin-top: 14px;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.public-article-row h3 {
  margin-top: 8px;
  color: #162f38;
  font-size: 14px;
  line-height: 1.28;
}

.public-article-row p {
  display: none;
}

.public-article-row em {
  margin-top: 16px;
  margin-bottom: 18px;
  color: #7c8c94;
  font-size: 11px;
  font-style: normal;
}

.public-demo-panel {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1fr);
  gap: 38px;
  border-radius: 10px;
  background: radial-gradient(circle at 38% 20%, rgba(68, 155, 131, .34), transparent 36%), linear-gradient(135deg, #063130, #084545);
  margin-top: 26px;
  margin-bottom: 28px;
  padding: 30px 34px;
}

.public-demo-panel h2 {
  margin: 0;
  color: #fff;
  font-size: 33px;
  line-height: 1.08;
}

.public-demo-panel p {
  max-width: 410px;
  margin: 12px 0 66px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.55;
}

.public-demo-cta {
  width: min(100%, 340px);
  background: #31a924;
  border-color: #31a924;
  font-size: 18px;
}

.public-inline-demo-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
}

.public-inline-demo-form input,
.public-inline-demo-form select,
.public-inline-demo-form textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  background: #fff;
  color: #152d34;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.public-inline-demo-form textarea {
  grid-column: 1 / -1;
  min-height: 66px;
  padding-top: 11px;
  resize: vertical;
}

.public-inline-demo-form ul {
  grid-column: 2;
  align-self: center;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  color: #dff6e8;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
}

.public-inline-demo-form li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #2bbf58;
  color: #fff;
  margin-right: 8px;
  font-size: 10px;
}

.public-footer {
  min-height: 72px;
  border-top: 1px solid var(--public-line);
}

@media (max-width: 900px) {
  .public-site .public-nav {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .public-site .public-nav nav {
    gap: 12px;
  }

  .public-site .public-nav nav a:not(.public-signin) {
    display: none;
  }

  .public-site .public-hero {
    grid-template-columns: 1fr;
  }

  .public-hero-proof {
    max-width: none;
  }

  .public-hero-stage {
    grid-template-columns: 1fr;
  }

  .public-hero-sidecards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-phone {
    right: 28px;
  }

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

  .public-card-row,
  .public-insights-section,
  .public-demo-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px) and (min-width: 901px) {
  .public-site .public-hero {
    grid-template-columns: 1fr;
  }

  .public-hero-proof {
    max-width: min(100%, 880px);
  }

  .public-hero-stage {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .public-hero-sidecards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .public-site .public-hero,
  .public-logo-strip,
  .public-feature-strip,
  .public-card-row,
  .public-insights-section,
  .public-demo-panel,
  .public-site .public-footer {
    width: min(100% - 28px, 1340px);
  }

  .public-site .public-nav {
    padding: 12px 14px;
  }

  .public-site .public-logo img {
    width: 132px;
  }

  .public-site .public-nav nav button {
    display: none;
  }

  .public-hero-copy h1 {
    font-size: 45px;
  }

  .public-hero-proof,
  .public-logo-strip div,
  .public-hero-sidecards,
  .public-feature-strip,
  .public-card-row,
  .public-article-row,
  .product-metrics,
  .product-work,
  .public-inline-demo-form {
    grid-template-columns: 1fr;
  }

  .public-product-window {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .product-screen {
    border-radius: 8px;
  }

  .public-product-window aside {
    display: none;
  }

  .public-phone {
    position: static;
    width: 100%;
    min-height: auto;
    border-width: 3px;
    border-radius: 18px;
    margin-top: 12px;
  }

  .public-laptop-shadow {
    display: none;
  }

  .public-card-row > article {
    grid-template-columns: 1fr;
  }

  .public-demo-panel p {
    margin-bottom: 26px;
  }

  .public-inline-demo-form ul {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-product-window,
  .product-metrics article,
  .product-work p,
  .public-phone,
  .public-hero-sidecards article,
  .public-hero-sidecards i,
  .public-hero-sidecards em {
    animation: none;
  }
}

@media (max-width: 620px) {
  .public-site {
    overflow-x: hidden;
  }

  .public-site .public-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 68px;
    padding: 11px 16px;
  }

  .public-site .public-logo img {
    width: 142px;
    max-width: 54vw;
  }

  .public-site .public-nav nav {
    gap: 0;
  }

  .public-site .public-nav .public-signin {
    min-width: 82px;
    min-height: 38px;
    border-radius: 9px;
    padding: 0 14px;
    font-size: 13px;
  }

  .public-site .public-hero,
  .public-logo-strip,
  .public-feature-strip,
  .public-card-row,
  .public-insights-section,
  .public-demo-panel,
  .public-site .public-footer {
    width: calc(100% - 28px);
  }

  .public-site .public-hero {
    min-height: 0;
    gap: 26px;
    padding: 28px 0 24px;
  }

  .public-hero-copy h1 {
    max-width: 360px;
    font-size: clamp(42px, 12vw, 50px);
    line-height: 1;
  }

  .public-hero-copy p {
    max-width: none;
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.55;
  }

  .public-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 22px;
  }

  .public-primary,
  .public-secondary,
  .public-demo-cta {
    width: 100%;
    min-height: 46px;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
  }

  .public-hero-proof {
    gap: 10px;
    margin-top: 22px;
  }

  .public-hero-proof span {
    grid-template-columns: 38px minmax(0, 1fr);
    border: 1px solid #e2ebee;
    border-radius: 14px;
    background: #fff;
    padding: 10px 12px;
  }

  .public-hero-proof svg {
    width: 36px;
    height: 36px;
    padding: 9px;
  }

  .public-hero-proof strong,
  .public-hero-proof em {
    grid-column: 2;
  }

  .public-hero-stage {
    min-height: 0;
    gap: 12px;
  }

  .public-product-window {
    min-height: 0;
    border-width: 5px;
    border-radius: 14px;
    box-shadow: 0 16px 28px rgba(20, 50, 55, .15);
  }

  .public-product-window > section {
    padding: 18px 14px 16px;
  }

  .public-product-window header {
    margin-bottom: 14px;
  }

  .public-product-window header strong {
    font-size: 15px;
  }

  .product-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .product-metrics article {
    min-height: 70px;
    padding: 10px;
  }

  .product-work {
    gap: 8px;
  }

  .product-work p {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .product-work p em {
    display: none;
  }

  .public-phone {
    display: none;
  }

  .public-hero-sidecards {
    gap: 10px;
  }

  .public-hero-sidecards article {
    min-height: 82px;
    padding: 14px;
  }

  .public-logo-strip {
    padding: 20px 0 22px;
  }

  .public-logo-strip p {
    max-width: 300px;
    margin-inline: auto;
    font-size: 13px;
  }

  .public-logo-strip div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
  }

  .public-logo-strip b {
    font-size: 21px;
  }

  .public-logo-strip img {
    max-width: 118px;
    max-height: 38px;
  }

  .public-logo-strip .public-logo-wordmark {
    grid-template-columns: 26px auto;
    column-gap: 8px;
  }

  .public-logo-strip .public-logo-wordmark img {
    width: 25px;
    height: 25px;
  }

  .public-feature-strip {
    gap: 18px;
    padding: 26px 0 28px;
  }

  .public-feature-strip > div h2 {
    font-size: 27px;
  }

  .public-feature-strip > div p {
    max-width: none;
  }

  .public-feature-strip article {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 12px;
    border-left: 0;
    border-top: 1px solid var(--public-line);
    padding: 16px 0 0;
  }

  .public-feature-strip article svg {
    grid-row: 1 / span 2;
  }

  .public-card-row {
    gap: 14px;
    padding: 22px 0;
  }

  .public-card-row > article {
    gap: 14px;
    min-height: 0;
    border-radius: 12px;
    padding: 18px;
  }

  .workflow-mini,
  .invoice-mini,
  .portal-mini {
    padding: 14px;
  }

  .public-insights-section {
    gap: 18px;
    padding: 28px 0 18px;
  }

  .public-article-row {
    gap: 14px;
  }

  .article-image {
    height: 138px;
  }

  .public-demo-panel {
    gap: 22px;
    border-radius: 16px;
    margin-top: 18px;
    padding: 24px 18px;
  }

  .public-demo-panel h2 {
    font-size: 30px;
  }

  .public-demo-panel p {
    margin-bottom: 18px;
  }

  .public-inline-demo-form {
    gap: 9px;
  }

  .public-inline-demo-form input,
  .public-inline-demo-form select,
  .public-inline-demo-form textarea {
    min-height: 42px;
    border-radius: 8px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .public-hero-actions {
    grid-template-columns: 1fr;
  }

  .public-hero-copy h1 {
    font-size: 41px;
  }

  .public-site .public-logo img {
    width: 132px;
  }
}

/* Delegate public blog and staff article management */
.public-blog-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.74fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(74px, 9vw, 132px) clamp(20px, 4vw, 48px) clamp(42px, 6vw, 72px);
  border-bottom: 1px solid var(--public-line);
}

.public-blog-hero-v2 h1 {
  max-width: 780px;
  margin: 0;
  color: var(--public-ink);
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: 0;
}

.public-blog-hero-v2 p {
  max-width: 640px;
  margin: 24px 0 0;
  color: #536568;
  font-size: 19px;
  line-height: 1.65;
}

.public-blog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.public-blog-actions button,
.public-blog-actions a,
.public-blog-card-footer button,
.public-blog-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid #103334;
  border-radius: 8px;
  padding: 0 24px;
  background: #103334;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.public-blog-actions a,
.public-blog-card-footer button {
  background: #fff;
  color: #103334;
}

.public-featured-article {
  overflow: hidden;
  display: grid;
  grid-template-rows: 260px auto;
  border: 1px solid rgba(16, 51, 52, 0.16);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(7, 32, 32, 0.12);
}

.public-featured-image,
.public-blog-card-image {
  background: linear-gradient(135deg, rgba(16, 51, 52, 0.16), rgba(122, 219, 116, 0.18));
  background-position: center;
  background-size: cover;
}

.public-featured-article > div:last-child {
  padding: 26px;
}

.public-featured-article span,
.public-blog-list-v2 article > span,
.delegate-article-preview span {
  color: #0f7670;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-featured-article h2 {
  margin: 10px 0 12px;
  color: var(--public-ink);
  font-size: 28px;
  line-height: 1.12;
}

.public-featured-article em,
.public-blog-card-footer em {
  color: #738487;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.public-blog-list-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px clamp(20px, 4vw, 48px);
}

.public-blog-list-v2 article {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid rgba(16, 51, 52, 0.12);
  border-radius: 18px;
  padding: 0;
  background: #fff;
  box-shadow: 0 16px 42px rgba(7, 32, 32, 0.06);
}

.public-blog-card-image {
  height: 210px;
}

.public-blog-list-v2 article > span,
.public-blog-list-v2 article > h2,
.public-blog-list-v2 article > p,
.public-blog-card-footer {
  margin-left: 22px;
  margin-right: 22px;
}

.public-blog-list-v2 article > span {
  margin-top: 22px;
}

.public-blog-list-v2 h2 {
  margin-top: 10px;
  color: var(--public-ink);
  font-size: 25px;
  line-height: 1.16;
}

.public-blog-list-v2 p {
  flex: 1;
  margin-top: 12px;
  color: #66777a;
  font-size: 15px;
  line-height: 1.62;
}

.public-blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 0 22px;
}

.public-blog-card-footer button {
  min-height: 40px;
  padding: 0 16px;
}

.public-blog-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1320px;
  margin: 20px auto 58px;
  border-radius: 18px;
  padding: 34px clamp(22px, 4vw, 42px);
  background: linear-gradient(135deg, #082c2c, #0f3f3f);
  color: #fff;
}

.public-blog-cta h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
}

.public-blog-cta p {
  max-width: 640px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.55;
}

.public-blog-cta button {
  background: #72d667;
  border-color: #72d667;
  color: #082c2c;
}

.delegate-articles-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
  gap: 22px;
  min-height: calc(100vh - 170px);
  padding: 0 0 24px;
}

.delegate-articles-list,
.delegate-article-editor {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.delegate-articles-list {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.delegate-articles-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #f7faf9;
}

.delegate-articles-summary div {
  border: 1px solid #dbe7e5;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.delegate-articles-summary strong {
  display: block;
  color: #172326;
  font-size: 24px;
}

.delegate-articles-summary span {
  color: #748386;
  font-size: 12px;
  font-weight: 700;
}

.delegate-article-items {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.delegate-article-items button {
  display: grid;
  gap: 7px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.delegate-article-items button.active,
.delegate-article-items button:hover {
  border-color: #b8d6d2;
  background: #f1faf8;
}

.delegate-article-items span {
  color: #0f7670;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.delegate-article-items strong {
  color: #172326;
  font-size: 16px;
  line-height: 1.25;
}

.delegate-article-items em {
  overflow: hidden;
  display: -webkit-box;
  color: #6b7b7e;
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.delegate-article-editor {
  overflow: auto;
  padding: 22px;
}

.delegate-article-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
}

.delegate-article-editor-head h2 {
  margin: 0;
  color: #172326;
  font-size: 24px;
}

.delegate-article-editor-head p {
  margin: 6px 0 0;
  color: #7a898c;
  font-size: 14px;
}

.delegate-article-editor-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.delegate-article-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.delegate-article-body {
  min-height: 260px;
}

.delegate-article-preview {
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
  border: 1px solid #dce8e6;
  border-radius: 14px;
  padding: 16px;
  background: #f8fbfb;
}

.delegate-article-preview-image {
  min-height: 164px;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
}

.delegate-article-preview h3 {
  margin: 10px 0;
  color: #172326;
  font-size: 26px;
  line-height: 1.12;
}

.delegate-article-preview p {
  margin: 0;
  color: #69797c;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .public-blog-hero-v2,
  .public-blog-list-v2,
  .delegate-articles-shell {
    grid-template-columns: 1fr;
  }

  .public-blog-list-v2 {
    padding-top: 30px;
  }

  .public-blog-cta,
  .delegate-article-editor-head,
  .delegate-article-preview {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .public-blog-hero-v2 {
    padding-top: 42px;
  }

  .public-featured-article {
    grid-template-rows: 190px auto;
  }

  .public-blog-actions,
  .public-blog-card-footer,
  .public-blog-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .public-blog-actions button,
  .public-blog-actions a,
  .public-blog-card-footer button,
  .public-blog-cta button {
    width: 100%;
  }

  .delegate-articles-summary,
  .delegate-article-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Minimal public SaaS homepage */
.public-site-minimal {
  --minimal-ink: #0d2829;
  --minimal-muted: #667476;
  --minimal-line: #dce6e4;
  --minimal-soft: #f6faf9;
  background:
    radial-gradient(circle at 78% 14%, rgba(114, 214, 103, 0.13), transparent 30%),
    linear-gradient(180deg, #fff 0%, #f8fbfa 100%);
  color: var(--minimal-ink);
}

.public-site-minimal .public-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}

.public-site-minimal .public-nav nav a:not(.public-signin):not(.public-signup) {
  color: #273f41;
}

.public-site-minimal .public-nav .public-signup {
  border: 1px solid #103334;
  border-radius: 8px;
  padding: 12px 20px;
  color: #103334;
  text-decoration: none;
}

.minimal-hero,
.minimal-intro-strip,
.minimal-feature-row,
.minimal-portals,
.minimal-demo-band,
.public-footer-minimal,
.public-legal-page {
  max-width: 1220px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 46px);
  padding-right: clamp(20px, 4vw, 46px);
}

.minimal-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: center;
  min-height: 720px;
  padding-top: clamp(70px, 9vw, 126px);
  padding-bottom: clamp(48px, 7vw, 86px);
}

.minimal-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--minimal-ink);
  font-size: clamp(58px, 8vw, 116px);
  line-height: 0.94;
  letter-spacing: 0;
}

.minimal-hero p {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--minimal-muted);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.62;
}

.minimal-hero-actions,
.minimal-demo-band > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}

.minimal-text-link {
  color: #103334;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.minimal-product-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16, 51, 52, 0.15);
  border-radius: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 34px 90px rgba(13, 40, 41, 0.13);
}

.minimal-product-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
}

.minimal-product-top span {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: conic-gradient(#72d667 0 28%, transparent 28% 42%, #72d667 42% 70%, transparent 70% 84%, #72d667 84%);
}

.minimal-product-top strong {
  flex: 1;
  font-size: 15px;
}

.minimal-product-top em {
  border-radius: 999px;
  padding: 6px 10px;
  background: #e8f7ed;
  color: #2b7a45;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

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

.minimal-product-grid article {
  border: 1px solid var(--minimal-line);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

.minimal-product-grid span,
.minimal-product-grid em,
.minimal-workflow-preview span,
.minimal-feature-row p,
.minimal-portals p,
.minimal-portal-cards span,
.public-footer-minimal p {
  color: var(--minimal-muted);
}

.minimal-product-grid strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 30px;
}

.minimal-product-grid em {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.minimal-workflow-preview {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.minimal-workflow-preview p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin: 0;
  border: 1px solid var(--minimal-line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.minimal-workflow-preview i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #103334;
  color: #fff;
  font-style: normal;
  font-weight: 800;
}

.minimal-workflow-preview b {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #72d667, #dbeeea);
}

.minimal-intro-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(300px, 0.7fr);
  gap: 34px;
  border-top: 1px solid var(--minimal-line);
  border-bottom: 1px solid var(--minimal-line);
  padding-top: 46px;
  padding-bottom: 46px;
}

.minimal-intro-strip h2,
.minimal-portals h2,
.minimal-demo-band h2 {
  margin: 0;
  color: var(--minimal-ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
}

.minimal-intro-strip p,
.minimal-portals p,
.minimal-demo-band p {
  margin: 0;
  color: var(--minimal-muted);
  font-size: 17px;
  line-height: 1.62;
}

.minimal-feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-top: 54px;
  padding-bottom: 54px;
}

.minimal-feature-row article,
.minimal-portal-cards article {
  border: 1px solid var(--minimal-line);
  border-radius: 16px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.78);
}

.minimal-feature-row span {
  color: #0f7670;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.minimal-feature-row p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.56;
}

.minimal-portals {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(380px, 0.95fr);
  gap: 34px;
  align-items: start;
  padding-top: 20px;
  padding-bottom: 54px;
}

.minimal-portal-cards {
  display: grid;
  gap: 14px;
}

.minimal-portal-cards strong {
  display: block;
  color: var(--minimal-ink);
  font-size: 21px;
}

.minimal-portal-cards span {
  display: block;
  margin-top: 8px;
  line-height: 1.5;
}

.minimal-demo-band {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  margin-bottom: 40px;
  border-radius: 22px;
  padding-top: 38px;
  padding-bottom: 38px;
  background: linear-gradient(135deg, #082c2c, #123f3f);
  color: #fff;
}

.minimal-demo-band h2,
.minimal-demo-band p {
  color: #fff;
}

.minimal-demo-band p {
  max-width: 580px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.76);
}

.public-footer-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid var(--minimal-line);
  padding-top: 28px;
  padding-bottom: 34px;
}

.public-footer-minimal span {
  color: var(--minimal-ink);
  font-weight: 900;
}

.public-footer-minimal p {
  margin: 4px 0 0;
}

.public-footer-minimal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.public-footer-minimal a {
  color: #3f5658;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.public-legal-page {
  max-width: 960px;
  padding-top: 72px;
  padding-bottom: 54px;
}

.public-legal-page h1 {
  margin: 22px 0 18px;
  color: var(--minimal-ink);
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1;
}

.public-legal-page > p {
  color: var(--minimal-muted);
  font-size: 18px;
  line-height: 1.6;
}

.public-legal-list {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.public-legal-list article {
  border: 1px solid var(--minimal-line);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
}

.public-legal-list h2 {
  margin: 0 0 8px;
  color: var(--minimal-ink);
  font-size: 22px;
}

.public-legal-list p,
.public-legal-note {
  margin: 0;
  color: var(--minimal-muted);
  line-height: 1.58;
}

.public-legal-note {
  margin-top: 24px;
  font-size: 13px;
}

@media (max-width: 920px) {
  .minimal-hero,
  .minimal-intro-strip,
  .minimal-portals {
    grid-template-columns: 1fr;
  }

  .minimal-hero {
    min-height: 0;
  }

  .minimal-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .minimal-demo-band,
  .public-footer-minimal {
    display: grid;
  }
}

@media (max-width: 640px) {
  .public-site-minimal .public-nav nav {
    grid-template-columns: 1fr 1fr;
  }

  .public-site-minimal .public-nav nav a[href^="/#"] {
    display: none;
  }

  .minimal-hero-actions,
  .minimal-demo-band > div:last-child {
    display: grid;
    grid-template-columns: 1fr;
  }

  .minimal-product-grid,
  .minimal-feature-row {
    grid-template-columns: 1fr;
  }

  .minimal-hero h1 {
    font-size: 54px;
  }
}

/* Premium public homepage product mockup */
.premium-hero {
  grid-template-columns: minmax(0, 0.78fr) minmax(560px, 0.98fr);
  gap: clamp(38px, 5vw, 76px);
  max-width: 1440px;
  min-height: 760px;
}

.premium-hero .minimal-hero-copy {
  position: relative;
  z-index: 2;
}

.premium-hero .minimal-hero-copy p {
  max-width: 610px;
}

.premium-product-stage {
  position: relative;
  min-height: 520px;
  border-radius: 30px;
}

.premium-product-stage::before {
  content: "";
  position: absolute;
  inset: -44px -34px -52px 42px;
  z-index: 0;
  border-radius: 44px;
  background:
    radial-gradient(circle at 80% 12%, rgba(114, 214, 103, 0.13), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(16, 51, 52, 0.11), transparent 36%);
  filter: blur(2px);
}

.premium-product-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 490px;
  overflow: hidden;
  border: 1px solid rgba(13, 40, 41, 0.16);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 34px 88px rgba(13, 40, 41, 0.18), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.premium-product-rail {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  padding: 22px 0;
  background: linear-gradient(180deg, #073535 0%, #0d2829 100%);
}

.premium-product-mark {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: conic-gradient(#77d86a 0 28%, transparent 28% 42%, #77d86a 42% 70%, transparent 70% 84%, #77d86a 84%);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08);
}

.premium-product-rail i {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
}

.premium-product-rail i:nth-child(2) {
  background: #22a889;
  box-shadow: 0 10px 22px rgba(34, 168, 137, 0.24);
}

.premium-product-main {
  min-width: 0;
  padding: 24px;
  background: linear-gradient(180deg, #fbfcfc 0%, #f6f9f8 100%);
}

.premium-product-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.premium-product-bar strong {
  display: block;
  color: #152629;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: 0;
}

.premium-product-bar span {
  display: block;
  margin-top: 5px;
  color: #708086;
  font-size: 13px;
  line-height: 1.35;
}

.premium-product-bar em {
  flex: 0 0 auto;
  border: 1px solid rgba(16, 51, 52, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #557070;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.premium-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.premium-metrics article {
  border: 1px solid rgba(16, 51, 52, 0.1);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 26px rgba(13, 40, 41, 0.04);
}

.premium-metrics span,
.premium-metrics small {
  display: block;
  color: #718188;
  font-size: 12px;
  font-weight: 680;
}

.premium-metrics strong {
  display: block;
  margin: 7px 0 4px;
  color: #142427;
  font-size: 34px;
  font-weight: 780;
  line-height: 1;
}

.premium-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(190px, 0.62fr);
  gap: 14px;
}

.premium-queue,
.premium-activity {
  min-width: 0;
  border: 1px solid rgba(16, 51, 52, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(13, 40, 41, 0.05);
}

.premium-queue header,
.premium-activity header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(16, 51, 52, 0.08);
}

.premium-queue header strong,
.premium-activity header strong {
  color: #17272b;
  font-size: 14px;
  font-weight: 790;
}

.premium-queue header span,
.premium-activity header span {
  color: #849196;
  font-size: 11px;
  font-weight: 720;
}

.premium-queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 72px;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(16, 51, 52, 0.07);
}

.premium-queue-row:last-child {
  border-bottom: 0;
}

.premium-queue-row strong,
.premium-activity p span {
  display: block;
  overflow: hidden;
  color: #26383d;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-queue-row div span {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #7e8c92;
  font-size: 11px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-queue-row > span {
  color: #5f7375;
  font-size: 11px;
  font-weight: 720;
}

.premium-queue-row em {
  justify-self: end;
  border-radius: 999px;
  padding: 6px 9px;
  background: #eef5f2;
  color: #4e6666;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.premium-queue-row.urgent em {
  background: #fff0ed;
  color: #b13c2c;
}

.premium-queue-row.high em {
  background: #fff7db;
  color: #9a6a00;
}

.premium-activity {
  padding-bottom: 6px;
}

.premium-activity p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(16, 51, 52, 0.06);
}

.premium-activity p:last-child {
  border-bottom: 0;
}

.premium-activity p i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at center, #73d467 0 34%, #e9f7eb 35% 100%);
  box-shadow: 0 0 0 1px rgba(42, 139, 72, 0.14);
}

.premium-activity p small {
  display: block;
  grid-column: 2;
  margin-top: -4px;
  color: #9aa4a8;
  font-size: 10px;
  font-weight: 720;
}

.premium-floating-card {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(16, 51, 52, 0.11);
  border-radius: 16px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 52px rgba(13, 40, 41, 0.13);
  backdrop-filter: blur(14px);
}

.premium-floating-card strong,
.premium-phone-preview strong {
  display: block;
  color: #173134;
  font-size: 13px;
  font-weight: 820;
}

.premium-floating-card span {
  display: block;
  margin-top: 5px;
  color: #74848a;
  font-size: 11px;
  font-weight: 660;
}

.premium-floating-card button {
  margin-top: 11px;
  border: 1px solid rgba(16, 51, 52, 0.24);
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  color: #103334;
  font-size: 11px;
  font-weight: 820;
}

.premium-floating-owner {
  top: 36px;
  right: -46px;
  width: 186px;
  background: linear-gradient(180deg, rgba(236, 249, 243, 0.96), rgba(255, 255, 255, 0.94));
}

.premium-floating-supplier {
  top: 162px;
  right: -62px;
  width: 182px;
}

.premium-floating-ai {
  right: -32px;
  bottom: 16px;
  width: 212px;
}

.premium-floating-ai i {
  display: block;
  height: 7px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eceb;
}

.premium-floating-ai i::after {
  content: "";
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38b48f, #72d667);
  animation: premiumProgress 5.5s ease-in-out infinite;
}

.premium-phone-preview {
  position: absolute;
  z-index: 4;
  right: 106px;
  bottom: -26px;
  width: 142px;
  min-height: 252px;
  border: 7px solid #0c2224;
  border-radius: 25px;
  padding: 18px 9px 12px;
  background: #fff;
  box-shadow: 0 24px 58px rgba(13, 40, 41, 0.24);
}

.premium-phone-top {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #0c2224;
  transform: translateX(-50%);
}

.premium-phone-preview > span {
  display: block;
  margin: 7px 0 9px;
  border-bottom: 1px solid #e6eeee;
  padding-bottom: 8px;
  color: #2b8979;
  font-size: 10px;
  font-weight: 820;
}

.premium-phone-preview p {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
  border: 1px solid #e6eeee;
  border-radius: 10px;
  padding: 8px;
  color: #26383d;
  font-size: 10px;
  font-weight: 740;
}

.premium-phone-preview em {
  color: #b13c2c;
  font-size: 9px;
  font-style: normal;
}

@keyframes premiumProgress {
  0%, 100% { transform: translateX(-8%); }
  50% { transform: translateX(72%); }
}

@media (max-width: 1180px) {
  .premium-hero {
    grid-template-columns: 1fr;
    max-width: 1120px;
  }

  .premium-product-stage {
    max-width: 860px;
  }

  .premium-floating-owner,
  .premium-floating-supplier,
  .premium-floating-ai {
    right: 18px;
  }
}

@media (max-width: 760px) {
  .premium-hero {
    padding-top: 48px;
  }

  .premium-product-stage {
    min-height: 0;
  }

  .premium-product-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .premium-product-rail {
    display: none;
  }

  .premium-product-main {
    padding: 16px;
  }

  .premium-product-bar,
  .premium-workspace-grid {
    display: grid;
  }

  .premium-metrics {
    grid-template-columns: 1fr;
  }

  .premium-queue-row {
    grid-template-columns: minmax(0, 1fr) 66px;
  }

  .premium-queue-row em {
    grid-column: 2;
  }

  .premium-floating-card,
  .premium-phone-preview {
    display: none;
  }
}

/* Premium public homepage lower sections */
.premium-proof-row,
.premium-portal-section,
.premium-security-band {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: clamp(24px, 6.4vw, 100px);
  padding-right: clamp(24px, 6.4vw, 100px);
}

.premium-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-top: 42px;
  padding-bottom: 45px;
  background: #fff;
}

.premium-proof-row article {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  align-items: start;
  min-height: 118px;
  border-right: 1px solid rgba(16, 51, 52, 0.12);
  padding: 2px clamp(12px, 1.8vw, 28px);
}

.premium-proof-row article:last-child {
  border-right: 0;
}

.premium-proof-row article > div {
  display: grid;
  grid-row: 1 / 4;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #103334;
}

.premium-proof-row svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.premium-proof-row h2 {
  margin: 0 0 10px;
  grid-column: 2;
  color: #12272a;
  font-size: clamp(19px, 1.42vw, 24px);
  line-height: 1.08;
  font-weight: 830;
}

.premium-proof-row p {
  margin: 0;
  grid-column: 2;
  max-width: 380px;
  color: #50666b;
  font-size: 13px;
  line-height: 1.48;
}

.premium-proof-row a,
.premium-section-copy a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  color: #18a118;
  font-size: 14px;
  font-weight: 820;
  text-decoration: none;
}

.premium-proof-row a {
  grid-column: 2;
}

.premium-proof-row a svg,
.premium-section-copy a svg {
  width: 16px;
  height: 16px;
}

.premium-portal-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  padding-top: 38px;
  padding-bottom: 38px;
  background:
    radial-gradient(circle at 4% 50%, rgba(229, 247, 237, 0.96), transparent 26%),
    linear-gradient(90deg, #eef9f3 0%, #f8fcfa 42%, #edf8f3 100%);
}

.premium-section-copy {
  align-self: center;
  padding-right: 12px;
}

.premium-section-copy h2 {
  margin: 0 0 10px;
  color: #11272a;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.04;
  font-weight: 850;
}

.premium-section-copy p {
  margin: 0;
  color: #586e73;
  font-size: 14px;
  line-height: 1.58;
}

.premium-portal-section article {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  border: 1px solid rgba(16, 51, 52, 0.07);
  border-radius: 15px;
  padding: 20px 108px 20px 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 44px rgba(13, 40, 41, 0.055);
}

.portal-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e8f8ee;
  color: #0c8a62;
}

.portal-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.premium-portal-section h3 {
  margin: 11px 0 8px;
  color: #12272a;
  font-size: 17px;
  font-weight: 830;
}

.premium-portal-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  color: #53696e;
  font-size: 11.5px;
  font-weight: 680;
  list-style: none;
}

.premium-portal-section li::before {
  content: "✓";
  margin-right: 8px;
  color: #25984f;
  font-weight: 900;
}

.portal-screen {
  position: absolute;
  top: 24px;
  right: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  width: 86px;
  border: 1px solid rgba(16, 51, 52, 0.09);
  border-radius: 12px;
  padding: 11px;
  background: linear-gradient(180deg, #fff, #f6faf8);
  box-shadow: 0 12px 30px rgba(13, 40, 41, 0.08);
}

.portal-screen b {
  display: block;
  width: 44px;
  height: 8px;
  border-radius: 999px;
  background: #dbe9e6;
}

.portal-screen span {
  position: relative;
  height: 21px;
  border: 1px solid #edf3f1;
  border-radius: 7px;
  background: #fbfdfc;
}

.portal-screen span::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: #dfece8;
}

.portal-screen span::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 5px;
  border-radius: 999px;
  background: #d9f2df;
}

.portal-screen span:first-child {
  background: #f5fbf8;
}

.premium-security-band {
  display: grid;
  grid-template-columns: 64px minmax(260px, 0.92fr) minmax(280px, 0.94fr) 1px minmax(230px, 0.78fr) 156px;
  gap: clamp(14px, 1.55vw, 26px);
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
  background:
    radial-gradient(circle at 9% 52%, rgba(61, 214, 88, 0.14), transparent 24%),
    linear-gradient(135deg, #073233, #052728 62%, #0c4140);
  color: #fff;
}

.security-lock {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6ddc32, #28a86d);
  color: #fff;
  box-shadow: 0 16px 36px rgba(24, 181, 91, 0.28);
}

.security-lock svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.premium-security-band h2,
.premium-security-cta h2 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.04;
  font-weight: 850;
}

.premium-security-band p,
.premium-security-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.52;
}

.premium-security-band ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

.premium-security-band li::before {
  content: "✓";
  margin-right: 8px;
  color: #75dd59;
}

.premium-security-band::after {
  content: "";
  display: block;
  width: 1px;
  height: 66px;
  background: rgba(255, 255, 255, 0.22);
  grid-column: 4;
  grid-row: 1;
}

.premium-security-cta {
  grid-column: 5;
}

.premium-security-band > .public-primary {
  grid-column: 6;
  background: linear-gradient(135deg, #65d82f, #21a32d);
  color: #082424;
  min-width: 156px;
  justify-content: center;
}

.public-footer-minimal {
  max-width: 1440px;
}

.public-footer-minimal span {
  font-size: 16px;
}

@media (max-width: 1180px) {
  .premium-proof-row,
  .premium-portal-section,
  .premium-security-band {
    grid-template-columns: 1fr;
  }

  .premium-security-band::after {
    display: none;
  }

  .premium-security-cta,
  .premium-security-band > .public-primary {
    grid-column: auto;
  }

  .premium-proof-row article {
    border-right: 0;
    border-bottom: 1px solid rgba(16, 51, 52, 0.1);
  }

  .premium-proof-row article:last-child {
    border-bottom: 0;
  }

  .premium-portal-section article {
    min-height: 178px;
  }

  .premium-security-band ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .premium-proof-row article {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 0;
    padding-right: 0;
  }

  .premium-portal-section article {
    padding-right: 24px;
  }

  .portal-screen {
    position: static;
    width: auto;
    margin-top: 18px;
  }

  .premium-security-band > .public-primary {
    width: 100%;
  }
}

/* Enterprise public homepage refresh */
.public-site-enterprise {
  --enterprise-ink: #0b2425;
  --enterprise-muted: #65767a;
  --enterprise-line: rgba(16, 51, 52, 0.12);
  --enterprise-soft: #f5faf7;
  background:
    radial-gradient(circle at 78% 10%, rgba(104, 215, 96, 0.14), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 46%, #f5faf7 100%);
  color: var(--enterprise-ink);
}

.public-site-enterprise .public-nav {
  max-width: 1440px;
  height: 76px;
  border-bottom: 1px solid rgba(16, 51, 52, 0.08);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.public-site-enterprise .public-nav nav {
  gap: 26px;
}

.public-site-enterprise .public-nav nav a,
.public-site-enterprise .public-nav nav button {
  font-size: 13px;
  font-weight: 760;
}

.enterprise-hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: start;
  max-width: 1440px;
  min-height: calc(100vh - 76px);
  padding: clamp(38px, 5.6vw, 78px) clamp(28px, 6.4vw, 100px) clamp(46px, 5.6vw, 76px);
}

.enterprise-hero-copy h1 {
  max-width: 560px;
  margin: 0;
  color: #062626;
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 860;
  line-height: 0.94;
  letter-spacing: 0;
}

.enterprise-hero-copy h1::after {
  content: "";
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  margin-left: 0.06em;
  border-radius: 999px;
  background: #57d436;
  vertical-align: baseline;
}

.enterprise-hero-copy p {
  max-width: 540px;
  margin: 18px 0 0;
  color: #4f6266;
  font-size: clamp(16px, 1.18vw, 20px);
  line-height: 1.54;
  font-weight: 430;
}

.enterprise-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
}

.enterprise-hero-actions .public-primary,
.enterprise-hero-actions .public-secondary,
.enterprise-hero-actions .minimal-text-link {
  min-height: 54px;
  padding: 0 24px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 820;
}

.enterprise-hero-actions .minimal-text-link {
  display: inline-grid;
  place-items: center;
  color: #103334;
  text-decoration: none;
}

.enterprise-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 620px;
  margin-top: 34px;
  color: #163739;
  font-size: 13px;
  font-weight: 790;
}

.enterprise-hero-points span {
  position: relative;
  padding-left: 30px;
}

.enterprise-hero-points span::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #dff6e4;
  box-shadow: inset 0 0 0 6px #53ce42;
}

.enterprise-hero .premium-product-stage {
  min-height: 550px;
  transform: translateZ(0);
}

.enterprise-hero .premium-product-shell {
  border: 1px solid rgba(16, 51, 52, 0.15);
  box-shadow: 0 38px 92px rgba(13, 40, 41, 0.18);
}

.enterprise-hero .premium-product-main {
  background: linear-gradient(180deg, #fff, #f7fbf9);
}

.enterprise-portal-showcase,
.enterprise-operations,
.enterprise-security-band {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(24px, 6.4vw, 100px);
  padding-right: clamp(24px, 6.4vw, 100px);
}

.enterprise-portal-showcase {
  padding-top: clamp(72px, 8vw, 116px);
  padding-bottom: clamp(72px, 8vw, 116px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 18%, #ffffff 100%);
}

.enterprise-section-intro {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 0.82fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: end;
  margin-bottom: 36px;
}

.enterprise-section-intro h2,
.enterprise-operations > div h2 {
  margin: 0;
  color: #092b2c;
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: 0;
}

.enterprise-section-intro p,
.enterprise-operations > div p {
  margin: 0;
  color: var(--enterprise-muted);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.55;
}

.enterprise-portal-grid {
  display: grid;
  gap: 18px;
}

.enterprise-portal-grid article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 0.46fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  min-height: 186px;
  padding: clamp(22px, 3.2vw, 38px);
  border: 1px solid rgba(16, 51, 52, 0.1);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 248, 0.92)),
    #fff;
  box-shadow: 0 18px 60px rgba(16, 51, 52, 0.08);
}

.enterprise-portal-grid article:nth-child(2) {
  background: linear-gradient(135deg, #f7fbff, #fff);
}

.enterprise-portal-grid article:nth-child(3) {
  background: linear-gradient(135deg, #fffaf2, #fff);
}

.enterprise-portal-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #e5f7e9;
  color: #103334;
}

.enterprise-portal-icon svg,
.enterprise-operations article svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

.enterprise-portal-grid h3,
.enterprise-operations h3 {
  margin: 0;
  color: #102b2c;
  font-size: clamp(24px, 2vw, 33px);
  font-weight: 820;
  line-height: 1.05;
}

.enterprise-portal-grid p,
.enterprise-operations article p {
  margin: 11px 0 0;
  color: #66777c;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 470;
}

.enterprise-portal-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.enterprise-portal-grid li {
  padding: 8px 11px;
  border: 1px solid rgba(16, 51, 52, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #244447;
  font-size: 12px;
  font-weight: 760;
}

.enterprise-portal-preview {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(16, 51, 52, 0.1);
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.enterprise-portal-preview span {
  position: relative;
  min-height: 38px;
  border-radius: 12px;
  background: #f5faf8;
  border: 1px solid rgba(16, 51, 52, 0.07);
}

.enterprise-portal-preview span::before,
.enterprise-portal-preview span::after {
  content: "";
  position: absolute;
  top: 13px;
  height: 8px;
  border-radius: 999px;
  background: #d9e8e4;
}

.enterprise-portal-preview span::before {
  left: 13px;
  width: 42%;
}

.enterprise-portal-preview span::after {
  right: 13px;
  width: 20%;
  background: #d8f3dd;
}

.enterprise-operations {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding-top: clamp(58px, 7vw, 92px);
  padding-bottom: clamp(58px, 7vw, 96px);
  border-top: 1px solid rgba(16, 51, 52, 0.08);
  border-bottom: 1px solid rgba(16, 51, 52, 0.08);
  background: #fff;
}

.enterprise-operations > div {
  padding-right: clamp(10px, 2vw, 34px);
}

.enterprise-operations > div p {
  margin-top: 18px;
  font-size: 17px;
}

.enterprise-operations article {
  padding: 28px;
  border-left: 1px solid rgba(16, 51, 52, 0.1);
}

.enterprise-operations article > div {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 28px;
  border-radius: 17px;
  background: #e8f7eb;
  color: #103334;
}

.enterprise-security-band {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
}

.enterprise-security-band .public-primary {
  text-decoration: none;
}

@media (max-width: 1120px) {
  .enterprise-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .enterprise-section-intro,
  .enterprise-operations {
    grid-template-columns: 1fr;
  }

  .enterprise-portal-grid article {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .enterprise-portal-preview {
    grid-column: 1 / -1;
  }

  .enterprise-operations article {
    border-left: 0;
    border-top: 1px solid rgba(16, 51, 52, 0.1);
  }
}

@media (max-width: 760px) {
  .public-site-enterprise .public-nav {
    height: auto;
  }

  .public-site-enterprise .public-nav nav a:not(.public-signin):not(.public-signup),
  .public-site-enterprise .public-nav nav button {
    display: none;
  }

  .enterprise-hero {
    padding-top: 56px;
  }

  .enterprise-hero-copy h1 {
    font-size: clamp(54px, 16vw, 72px);
  }

  .enterprise-hero-points {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .enterprise-portal-grid article {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .enterprise-portal-grid ul {
    display: grid;
  }

  .enterprise-hero .premium-product-stage {
    min-height: 500px;
    margin-left: -10px;
    margin-right: -10px;
  }
}

@media (max-width: 900px) {
  .email-colour-grid,
  .routing-choice-grid {
    grid-template-columns: 1fr;
  }

  .agency-office-card-header {
    display: grid;
  }

  .compact-hours .opening-hours-row {
    grid-template-columns: 1fr;
  }

  .email-colour-card div {
    grid-template-columns: 52px minmax(0, 1fr);
  }
}

/* Luxury public homepage */
.public-site-luxury {
  --luxury-ink: #0a2426;
  --luxury-green: #103334;
  --luxury-accent: #67d84d;
  --luxury-muted: #62757a;
  --luxury-line: rgba(16, 51, 52, .12);
  --luxury-surface: #f7faf8;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(103, 216, 77, .13), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 42%, #ffffff 100%);
  color: var(--luxury-ink);
}

.public-site-luxury .public-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: none;
  height: 76px;
  padding-inline: 72px;
  border-bottom: 1px solid rgba(16, 51, 52, .08);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
}

.public-site-luxury .public-logo img {
  width: 168px;
  max-height: 46px;
  object-fit: contain;
}

.public-site-luxury .public-nav nav {
  gap: 25px;
}

.public-site-luxury .public-nav nav a,
.public-site-luxury .public-nav nav button {
  color: #0d2829;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.public-site-luxury .public-nav nav button,
.public-site-luxury .public-primary {
  border: 1px solid #103334;
  background: #103334;
  color: #fff;
  box-shadow: 0 16px 36px rgba(16, 51, 52, .18);
}

.public-site-luxury .public-nav nav a.public-signup,
.public-site-luxury .public-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid #67d84d;
  border-radius: 10px;
  background: #67d84d;
  color: #092425;
  padding: 0 18px;
  text-decoration: none;
}

.public-site-luxury .public-nav nav a.public-signin,
.public-site-luxury .public-signin,
.public-site-luxury .public-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-color: rgba(16, 51, 52, .28);
  border-radius: 10px;
  background: #fff;
  color: #103334;
  padding: 0 18px;
  text-decoration: none;
}

.luxury-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, .74fr) minmax(620px, 1.26fr);
  gap: 76px;
  align-items: center;
  max-width: 1540px;
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 88px 72px 86px;
}

.luxury-hero::after {
  content: "";
  position: absolute;
  right: -18vw;
  top: 18%;
  width: 58vw;
  height: 540px;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(16, 51, 52, .95), rgba(9, 43, 44, .82));
  transform: skewX(-10deg);
  pointer-events: none;
}

.luxury-hero-copy {
  position: relative;
  z-index: 2;
}

.luxury-hero-copy h1 {
  max-width: 690px;
  margin: 0;
  color: #052b2d;
  font-size: 58px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: 0;
}

.luxury-hero-copy h1::after {
  content: ".";
  color: var(--luxury-accent);
}

.luxury-hero-copy p {
  max-width: 575px;
  margin: 24px 0 0;
  color: #41565b;
  font-size: 18px;
  line-height: 1.64;
  font-weight: 430;
}

.luxury-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}

.luxury-hero-actions .public-primary,
.luxury-hero-actions .public-secondary {
  min-height: 54px;
  border-radius: 13px;
  padding-inline: 24px;
  font-size: 14px;
  font-weight: 730;
  text-decoration: none;
}

.luxury-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding-inline: 7px;
  color: #103334;
  font-size: 14px;
  font-weight: 720;
  text-decoration: none;
}

.luxury-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.luxury-hero-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(16, 51, 52, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: #29484b;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 680;
  box-shadow: 0 10px 24px rgba(13, 40, 41, .055);
}

.luxury-product {
  position: relative;
  z-index: 2;
  min-height: 540px;
}

.luxury-product-frame {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 492px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 30px;
  background: #fff;
  box-shadow:
    0 48px 120px rgba(8, 35, 37, .28),
    0 0 0 8px rgba(255, 255, 255, .2);
}

.luxury-product-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  pointer-events: none;
}

.luxury-product-rail {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 15px;
  padding-top: 24px;
  background: linear-gradient(180deg, #073d3d, #06282a);
}

.luxury-product-rail span {
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: conic-gradient(#72d967 0 28%, transparent 28% 42%, #72d967 42% 70%, transparent 70% 84%, #72d967 84%);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .08);
}

.luxury-product-rail i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
}

.luxury-product-rail i:first-of-type {
  background: rgba(103, 216, 77, .28);
  box-shadow: inset 3px 0 0 #67d84d;
}

.luxury-product-screen {
  min-width: 0;
  padding: 25px;
  background:
    linear-gradient(180deg, #fff 0%, #f5faf8 100%);
}

.luxury-product-screen header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.luxury-product-screen header strong {
  display: block;
  color: #142b2e;
  font-size: 22px;
  font-weight: 720;
}

.luxury-product-screen header span,
.luxury-product-screen header em {
  color: #738187;
  font-size: 13px;
  font-style: normal;
  font-weight: 560;
}

.luxury-product-screen header em {
  border: 1px solid rgba(16, 51, 52, .11);
  border-radius: 999px;
  background: #fff;
  padding: 8px 12px;
}

.luxury-product-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.luxury-product-stats article,
.luxury-product-body > div,
.luxury-product-body aside {
  border: 1px solid rgba(16, 51, 52, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 28px rgba(13, 40, 41, .045);
}

.luxury-product-stats article {
  padding: 15px;
}

.luxury-product-stats span,
.luxury-product-stats small {
  display: block;
  overflow: hidden;
  color: #718188;
  font-size: 12px;
  font-weight: 610;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.luxury-product-stats strong {
  display: block;
  margin: 7px 0 4px;
  color: #122629;
  font-size: 34px;
  font-weight: 760;
  line-height: 1;
}

.luxury-product-body {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(200px, .66fr);
  gap: 14px;
}

.luxury-product-body h2 {
  margin: 0;
  padding: 16px 17px 12px;
  border-bottom: 1px solid rgba(16, 51, 52, .08);
  color: #172b2e;
  font-size: 14px;
  font-weight: 710;
}

.luxury-product-body p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  margin: 0;
  padding: 12px 17px;
  border-bottom: 1px solid rgba(16, 51, 52, .07);
}

.luxury-product-body aside p {
  grid-template-columns: 10px minmax(0, 1fr);
}

.luxury-product-body p:last-child {
  border-bottom: 0;
}

.luxury-product-body p strong,
.luxury-product-body p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.luxury-product-body p strong {
  color: #26383d;
  font-size: 13px;
  font-weight: 710;
}

.luxury-product-body p span,
.luxury-product-body p em {
  color: #728288;
  font-size: 12px;
  font-style: normal;
  font-weight: 580;
}

.luxury-product-body p em {
  border-radius: 999px;
  background: #eef7f1;
  color: #2d7650;
  padding: 6px 9px;
}

.luxury-product-body aside i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #67d84d;
}

.luxury-product-card,
.luxury-ai-card {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(16, 51, 52, .11);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 58px rgba(13, 40, 41, .16);
  backdrop-filter: blur(16px);
  padding: 16px;
}

.luxury-product-card.owner {
  top: 38px;
  right: -18px;
  width: 206px;
}

.luxury-product-card.supplier {
  right: 18px;
  bottom: 70px;
  width: 220px;
}

.luxury-product-card strong,
.luxury-ai-card strong,
.luxury-product-card span,
.luxury-ai-card span {
  display: block;
}

.luxury-product-card strong,
.luxury-ai-card strong {
  color: #173033;
  font-size: 14px;
  font-weight: 720;
}

.luxury-product-card span,
.luxury-ai-card span {
  margin-top: 6px;
  color: #687a80;
  font-size: 12px;
  font-weight: 580;
}

.luxury-ai-card {
  left: -18px;
  bottom: 26px;
  width: 240px;
}

.luxury-ai-card strong {
  display: flex;
  gap: 8px;
  align-items: center;
}

.luxury-ai-card svg {
  width: 16px;
  height: 16px;
  color: #67d84d;
}

.luxury-ai-card i {
  display: block;
  height: 6px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #67d84d 0%, #67d84d 66%, #dfe8e5 66%);
}

.luxury-system,
.luxury-portals,
.luxury-security,
.public-site-luxury .public-footer {
  padding-left: 72px;
  padding-right: 72px;
}

.luxury-system {
  padding-top: 104px;
  padding-bottom: 104px;
  border-top: 1px solid rgba(16, 51, 52, .08);
  background: #fff;
}

.luxury-section-heading {
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(320px, .7fr);
  gap: 72px;
  align-items: end;
  max-width: 1380px;
  margin: 0 auto 50px;
}

.luxury-section-heading h2,
.luxury-portal-copy h2,
.luxury-security h2 {
  margin: 0;
  color: #092b2c;
  font-size: 54px;
  font-weight: 770;
  line-height: 1;
  letter-spacing: 0;
}

.luxury-section-heading p,
.luxury-portal-copy p,
.luxury-security p {
  margin: 0;
  color: var(--luxury-muted);
  font-size: 18px;
  line-height: 1.58;
}

.luxury-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1380px;
  margin: 0 auto;
  border-top: 1px solid var(--luxury-line);
  border-bottom: 1px solid var(--luxury-line);
}

.luxury-system-grid article {
  min-height: 250px;
  padding: 38px;
  border-right: 1px solid var(--luxury-line);
}

.luxury-system-grid article:last-child {
  border-right: 0;
}

.luxury-system-grid span {
  display: block;
  margin-bottom: 54px;
  color: #41a835;
  font-size: 13px;
  font-weight: 760;
}

.luxury-system-grid h3 {
  margin: 0 0 15px;
  color: #122c2e;
  font-size: 30px;
  font-weight: 740;
  line-height: 1.08;
}

.luxury-system-grid p {
  max-width: 410px;
  margin: 0;
  color: #60747a;
  font-size: 15px;
  line-height: 1.58;
}

.luxury-portals {
  display: grid;
  grid-template-columns: minmax(360px, .72fr) minmax(520px, 1fr);
  gap: 92px;
  align-items: center;
  padding-top: 104px;
  padding-bottom: 104px;
  background:
    linear-gradient(180deg, #f7fbf9, #fff 72%),
    #fff;
}

.luxury-portal-copy,
.luxury-portal-board,
.luxury-security > * {
  max-width: 1380px;
}

.luxury-portal-copy p {
  margin-top: 22px;
  max-width: 560px;
}

.luxury-portal-copy .public-primary {
  margin-top: 30px;
  min-height: 52px;
  border-radius: 13px;
  padding-inline: 22px;
}

.luxury-portal-board {
  display: grid;
  gap: 14px;
}

.luxury-portal-board article {
  display: grid;
  grid-template-columns: 58px minmax(0, .38fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 128px;
  border: 1px solid rgba(16, 51, 52, .1);
  border-radius: 23px;
  background: rgba(255, 255, 255, .86);
  padding: 23px;
  box-shadow: 0 18px 56px rgba(13, 40, 41, .065);
}

.luxury-portal-board article.active {
  background: #103334;
  color: #fff;
}

.luxury-portal-board span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: #e7f8eb;
  color: #103334;
}

.luxury-portal-board article.active span {
  background: rgba(255, 255, 255, .12);
  color: #76dc67;
}

.luxury-portal-board svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.luxury-portal-board strong {
  color: inherit;
  font-size: 27px;
  font-weight: 740;
}

.luxury-portal-board p {
  margin: 0;
  color: #61757a;
  font-size: 14px;
  line-height: 1.55;
}

.luxury-portal-board article.active p {
  color: rgba(255, 255, 255, .76);
}

.luxury-security {
  display: grid;
  grid-template-columns: minmax(340px, .8fr) minmax(420px, 1fr) auto;
  gap: 64px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 76px;
  background:
    radial-gradient(circle at 12% 50%, rgba(82, 198, 58, .15), transparent 28%),
    linear-gradient(135deg, #073334 0%, #092829 62%, #0e4442 100%);
  color: #fff;
}

.luxury-security h2 {
  color: #fff;
  font-size: 46px;
}

.luxury-security p {
  margin-top: 16px;
  color: rgba(255, 255, 255, .75);
  font-size: 16px;
}

.luxury-security ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.luxury-security li {
  display: grid;
  gap: 12px;
  min-height: 126px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  padding: 18px;
}

.luxury-security li svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #76dc67;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.luxury-security li span {
  align-self: end;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  font-weight: 700;
}

.luxury-security .public-primary {
  min-height: 54px;
  border-color: #67d84d;
  border-radius: 14px;
  background: #67d84d;
  color: #092425;
}

.public-site-luxury .public-footer {
  max-width: none;
  background: #fff;
}

@media (max-width: 1240px) {
  .public-site-luxury .public-nav,
  .luxury-hero,
  .luxury-system,
  .luxury-portals,
  .luxury-security,
  .public-site-luxury .public-footer {
    padding-left: 34px;
    padding-right: 34px;
  }

  .luxury-hero,
  .luxury-section-heading,
  .luxury-portals,
  .luxury-security {
    grid-template-columns: 1fr;
  }

  .luxury-hero {
    gap: 54px;
  }

  .luxury-hero::after {
    right: -28vw;
    top: 43%;
    width: 84vw;
  }

  .luxury-product {
    max-width: 920px;
  }

  .luxury-system-grid,
  .luxury-security ul {
    grid-template-columns: 1fr;
  }

  .luxury-system-grid article {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--luxury-line);
  }

  .luxury-system-grid article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .public-site-luxury .public-nav {
    height: auto;
    min-height: 68px;
    padding-inline: 18px;
  }

  .public-site-luxury .public-logo img {
    width: 145px;
  }

  .public-site-luxury .public-nav nav {
    gap: 10px;
  }

  .public-site-luxury .public-nav nav a[href^="/#"],
  .public-site-luxury .public-nav nav button,
  .public-site-luxury .public-signup {
    display: none;
  }

  .luxury-hero,
  .luxury-system,
  .luxury-portals,
  .luxury-security,
  .public-site-luxury .public-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .luxury-hero {
    min-height: auto;
    padding-top: 50px;
    padding-bottom: 58px;
  }

  .luxury-hero::after {
    display: none;
  }

  .luxury-hero-copy h1 {
    font-size: 52px;
    line-height: .96;
  }

  .luxury-hero-copy p,
  .luxury-section-heading p,
  .luxury-portal-copy p {
    font-size: 16px;
  }

  .luxury-hero-actions {
    align-items: stretch;
  }

  .luxury-hero-actions .public-primary,
  .luxury-hero-actions .public-secondary {
    justify-content: center;
    width: 100%;
  }

  .luxury-text-link {
    justify-content: center;
    width: 100%;
  }

  .luxury-hero-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .luxury-product {
    min-height: auto;
  }

  .luxury-product-frame {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: auto;
    border-radius: 22px;
  }

  .luxury-product-rail {
    gap: 10px;
  }

  .luxury-product-rail span,
  .luxury-product-rail i {
    width: 28px;
    height: 28px;
  }

  .luxury-product-screen {
    padding: 15px;
  }

  .luxury-product-screen header {
    grid-template-columns: 1fr;
  }

  .luxury-product-stats {
    grid-template-columns: 1fr;
  }

  .luxury-product-body {
    grid-template-columns: 1fr;
  }

  .luxury-product-body aside,
  .luxury-product-card.owner,
  .luxury-product-card.supplier,
  .luxury-ai-card {
    display: none;
  }

  .luxury-section-heading h2,
  .luxury-portal-copy h2,
  .luxury-security h2 {
    font-size: 38px;
    line-height: 1.04;
  }

  .luxury-system,
  .luxury-portals {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .luxury-system-grid article {
    padding: 28px 0;
  }

  .luxury-system-grid span {
    margin-bottom: 32px;
  }

  .luxury-portal-board article {
    grid-template-columns: 1fr;
    min-height: auto;
  }

.luxury-security {
  gap: 28px;
  padding-top: 54px;
  padding-bottom: 54px;
}
}

.rental-application-workspace {
  display: grid;
  gap: 18px;
}

.application-score-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.application-score-strip > div,
.rental-application-section {
  border: 1px solid #dbe4ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 51, 52, 0.06);
}

.application-score-strip > div {
  padding: 16px;
  display: grid;
  gap: 6px;
}

.application-score-strip span,
.application-score-strip em,
.rental-application-section header p {
  color: #7a8896;
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.application-score-strip strong {
  color: #17232c;
  font-size: 17px;
}

.rental-application-section {
  overflow: hidden;
}

.rental-application-section header {
  padding: 18px 20px;
  border-bottom: 1px solid #edf1f4;
  background: #fbfcfd;
}

.rental-application-section h3 {
  margin: 0 0 4px;
  color: #17232c;
  font-size: 18px;
  font-weight: 700;
}

.rental-application-section p {
  margin: 0;
}

.rental-application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 20px;
}

.rental-application-grid label {
  display: grid;
  gap: 7px;
  color: #243241;
  font-weight: 700;
  font-size: 13px;
}

.rental-application-grid label.wide,
.rental-application-grid .reference-card {
  grid-column: 1 / -1;
}

.rental-application-grid input,
.rental-application-grid textarea,
.rental-application-grid select {
  width: 100%;
  border: 1px solid #d3dee8;
  border-radius: 12px;
  padding: 11px 12px;
  color: #17232c;
  background: #fff;
  font: inherit;
  font-weight: 500;
}

.application-check {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px !important;
  border: 1px solid #e2e9ef;
  border-radius: 12px;
  padding: 12px;
  background: #fbfcfd;
}

.application-check input {
  width: 18px;
  height: 18px;
}

.reference-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid #e5edf3;
  border-radius: 14px;
  padding: 14px;
  background: #fbfcfd;
}

.reference-card > strong {
  grid-column: 1 / -1;
  color: #103334;
}

.rental-application-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe4ec;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

.applicant-application-shell {
  min-height: 100vh;
  background: #f6f8fa;
}

.applicant-application-shell > header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid #dfe6ec;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.applicant-application-shell > header img {
  height: 42px;
  width: auto;
}

.applicant-application-shell > header button {
  border: 1px solid #d3dee8;
  border-radius: 10px;
  background: #fff;
  color: #103334;
  padding: 10px 14px;
  font-weight: 700;
}

.applicant-application-shell .workspace {
  padding-left: clamp(18px, 4vw, 48px);
  padding-right: clamp(18px, 4vw, 48px);
}

.esigning-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.esigning-summary-grid article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  border: 1px solid #dbe4ec;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
}

.esigning-summary-grid span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eaf7f0;
  color: #103334;
}

.esigning-summary-grid svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.esigning-summary-grid strong {
  color: #17232c;
  font-size: 28px;
  line-height: 1;
}

.esigning-summary-grid em {
  color: #7a8896;
  font-size: 13px;
  font-style: normal;
}

.esigning-modal {
  max-width: 860px;
}

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

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

.esigning-signer-grid article {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe4ec;
  border-radius: 14px;
  background: #fbfcfd;
  padding: 14px;
}

.esigning-signer-grid strong {
  color: #103334;
}

.esigning-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.public-signing-shell {
  min-height: 100vh;
  background: #f7faf8;
  color: #17232c;
}

.public-signing-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  border-bottom: 1px solid #dfe7e4;
  background: rgba(255, 255, 255, 0.92);
  padding: 16px clamp(18px, 4vw, 56px);
}

.public-signing-shell > header img {
  width: 154px;
  height: auto;
  display: block;
}

.public-signing-shell > header span {
  color: #657482;
  font-weight: 700;
}

.public-signing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 22px;
  padding: clamp(18px, 3vw, 38px);
}

.public-signing-document,
.public-signing-card,
.public-signing-loading {
  border: 1px solid #dbe4ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(16, 51, 52, 0.08);
}

.public-signing-document {
  overflow: hidden;
  min-height: calc(100vh - 128px);
}

.public-signing-document-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e5edf2;
  padding: 16px 18px;
}

.public-signing-document-header span,
.public-signing-card > span {
  display: block;
  color: #7a8896;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.public-signing-document-header strong {
  display: block;
  margin-top: 4px;
  color: #17232c;
}

.public-signing-document iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 205px);
  min-height: 640px;
  border: 0;
  background: #eef3f5;
}

.public-signing-card {
  align-self: start;
  display: grid;
  gap: 16px;
  padding: 22px;
  position: sticky;
  top: 18px;
}

.public-signing-card h1 {
  margin: 0;
  color: #10272a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.public-signing-card p {
  margin: 0;
  color: #657482;
  line-height: 1.5;
}

.public-signing-status {
  display: flex;
  align-items: center;
}

.public-signing-action-panel {
  display: grid;
  gap: 14px;
  border-top: 1px solid #e5edf2;
  padding-top: 16px;
}

.public-signing-complete,
.public-signing-no-document,
.public-signing-loading {
  display: grid;
  gap: 8px;
  padding: 26px;
}

.public-signing-complete {
  border: 1px solid #dbe4ec;
  border-radius: 14px;
  background: #f8fbfa;
}

.public-signing-complete strong {
  color: #103334;
  font-size: 20px;
}

.public-signing-complete span,
.public-signing-no-document,
.public-signing-loading p {
  color: #657482;
}

.public-signing-loading {
  max-width: 680px;
  margin: 8vh auto;
}

.public-signing-loading h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
}

@media (max-width: 980px) {
  .application-score-strip,
  .rental-application-grid,
  .reference-card,
  .esigning-summary-grid,
  .esigning-signer-grid {
    grid-template-columns: 1fr;
  }

  .public-signing-grid {
    grid-template-columns: 1fr;
  }

  .public-signing-card {
    position: static;
  }

  .public-signing-document {
    min-height: auto;
  }

  .public-signing-document iframe {
    height: 68vh;
    min-height: 420px;
  }
}

/* Premium public homepage */
.public-site-premium {
  --premium-ink: #071f20;
  --premium-green: #103334;
  --premium-green-2: #0c292a;
  --premium-accent: #68d64e;
  --premium-muted: #65757b;
  --premium-line: rgba(16, 51, 52, .12);
  --premium-soft: #f5f8f6;
  --premium-surface: #ffffff;
  background:
    linear-gradient(90deg, rgba(16, 51, 52, .04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #f7faf8 100%);
  color: var(--premium-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.public-site-premium .public-nav {
  width: min(1320px, calc(100% - 56px));
  min-height: 82px;
  border-bottom: 1px solid var(--premium-line);
}

.public-site-premium .public-logo img {
  width: 168px;
}

.public-site-premium .public-nav nav {
  gap: 8px;
}

.public-site-premium .public-nav nav a,
.public-site-premium .public-nav nav button {
  color: #294244;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.public-site-premium .public-nav nav button,
.public-site-premium .public-primary {
  border: 1px solid var(--premium-green);
  background: var(--premium-green);
  color: #fff;
  box-shadow: 0 16px 34px rgba(16, 51, 52, .18);
}

.public-site-premium .public-signup {
  border: 1px solid #69d44d;
  background: #69d44d;
  color: #072728;
}

.public-site-premium .public-signin,
.public-site-premium .public-secondary {
  border: 1px solid rgba(16, 51, 52, .24);
  background: #fff;
  color: var(--premium-green);
  box-shadow: none;
}

.public-site-premium .public-primary,
.public-site-premium .public-secondary {
  min-height: 48px;
  border-radius: 10px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 760;
}

.premium-hero {
  position: relative;
  width: min(1320px, calc(100% - 56px));
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: minmax(420px, .82fr) minmax(600px, 1.18fr);
  gap: 70px;
  align-items: center;
  margin: 0 auto;
  padding: 58px 0 74px;
}

.premium-hero-copy h1 {
  margin: 0;
  max-width: 720px;
  color: var(--premium-ink);
  font-size: clamp(60px, 7.4vw, 112px);
  font-weight: 780;
  line-height: .91;
  letter-spacing: 0;
}

.premium-hero-copy h1::after {
  content: "";
  display: inline-block;
  width: .16em;
  height: .16em;
  margin-left: .08em;
  border-radius: 999px;
  background: var(--premium-accent);
  vertical-align: baseline;
}

.premium-hero-copy p {
  max-width: 650px;
  margin: 30px 0 0;
  color: #435a5e;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 450;
  line-height: 1.62;
}

.premium-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}

.premium-quiet-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--premium-green);
  font-size: 14px;
  font-weight: 720;
  text-decoration: none;
}

.premium-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 560px;
  margin: 46px 0 0;
  border: 1px solid var(--premium-line);
  border-radius: 16px;
  background: var(--premium-line);
  overflow: hidden;
}

.premium-hero-metrics div {
  display: grid;
  gap: 5px;
  background: rgba(255, 255, 255, .86);
  padding: 18px 20px;
}

.premium-hero-metrics dt,
.premium-hero-metrics dd {
  margin: 0;
}

.premium-hero-metrics dt {
  color: var(--premium-ink);
  font-size: 15px;
  font-weight: 760;
}

.premium-hero-metrics dd {
  color: var(--premium-muted);
  font-size: 13px;
  font-weight: 560;
}

.premium-product {
  position: relative;
  min-height: 620px;
}

.premium-product-shell {
  position: relative;
  border: 1px solid rgba(16, 51, 52, .16);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)),
    radial-gradient(circle at 0 0, rgba(104, 214, 78, .20), transparent 35%);
  box-shadow: 0 34px 90px rgba(16, 51, 52, .18);
  padding: 16px;
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.premium-product-shell::before {
  content: "";
  position: absolute;
  inset: -28px -22px auto auto;
  z-index: -1;
  width: 68%;
  height: 72%;
  border-radius: 28px;
  background: #063132;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.premium-product-shell::after {
  content: "";
  position: absolute;
  inset: auto 10% -34px 14%;
  z-index: -1;
  height: 46px;
  border-radius: 999px;
  background: rgba(16, 51, 52, .20);
  filter: blur(26px);
}

.premium-product-shell {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
}

.premium-product-sidebar {
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 510px;
  border-radius: 17px;
  background: linear-gradient(180deg, #073334, #052526);
  padding: 18px 14px;
  color: #dcefed;
}

.premium-product-sidebar b {
  font-size: 15px;
  font-weight: 750;
}

.premium-mark {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: url("./public/favicon.png") center / cover no-repeat;
}

.premium-product-sidebar i {
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .11);
}

.premium-product-sidebar i:first-of-type {
  background: rgba(104, 214, 78, .30);
}

.premium-product-screen {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(16, 51, 52, .11);
  border-radius: 17px;
  background: #fff;
  padding: 20px;
}

.premium-product-screen header,
.premium-product-main,
.premium-product-stats {
  display: grid;
  gap: 12px;
}

.premium-product-screen header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.premium-product-screen header strong {
  display: block;
  color: var(--premium-ink);
  font-size: 21px;
  font-weight: 770;
}

.premium-product-screen header span,
.premium-product-screen header small {
  color: var(--premium-muted);
  font-size: 12px;
  font-weight: 620;
}

.premium-product-screen header small {
  border: 1px solid #cfe6da;
  border-radius: 999px;
  background: #effaf2;
  color: #19723b;
  padding: 6px 10px;
}

.premium-product-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.premium-product-stats article,
.premium-product-main section {
  border: 1px solid #e2eaec;
  border-radius: 14px;
  background: #fbfcfc;
  padding: 16px;
}

.premium-product-stats span,
.premium-product-stats em {
  display: block;
  color: var(--premium-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.premium-product-stats strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--premium-ink);
  font-size: 30px;
  line-height: 1;
}

.premium-product-stats em {
  color: #c34f4f;
}

.premium-product-main {
  grid-template-columns: 1.25fr .75fr;
}

.premium-product-main h2 {
  margin: 0 0 8px;
  color: var(--premium-ink);
  font-size: 13px;
  font-weight: 780;
}

.premium-product-main p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
  margin: 0;
  border-top: 1px solid #e7eef0;
  padding: 13px 0;
}

.premium-product-main p:last-child {
  padding-bottom: 0;
}

.premium-product-main strong,
.premium-product-main span,
.premium-product-main em {
  font-size: 12px;
  line-height: 1.25;
}

.premium-product-main strong {
  color: #263b3f;
  font-weight: 720;
}

.premium-product-main span,
.premium-product-main em {
  color: var(--premium-muted);
  font-style: normal;
}

.premium-product-main em {
  color: #db4f4f;
  font-weight: 700;
}

.premium-product-main section:nth-child(2) p {
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
}

.premium-product-main i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #68d64e;
}

.premium-floating-card,
.premium-ai-card {
  position: absolute;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(16, 51, 52, .12);
  border-radius: 15px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 20px 50px rgba(16, 51, 52, .16);
  padding: 18px;
}

.premium-floating-card strong,
.premium-ai-card strong {
  color: var(--premium-ink);
  font-size: 14px;
  font-weight: 770;
}

.premium-floating-card span,
.premium-ai-card span {
  color: var(--premium-muted);
  font-size: 12px;
  font-weight: 600;
}

.premium-floating-owner {
  top: 70px;
  right: -28px;
  width: 190px;
}

.premium-floating-supplier {
  right: 24px;
  bottom: 120px;
  width: 205px;
  min-height: 86px;
}

.premium-ai-card {
  left: 92px;
  bottom: -12px;
  width: 260px;
}

.premium-ai-card strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.premium-ai-card svg {
  width: 18px;
  color: #47b950;
}

.premium-ai-card i {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #68d64e 0 68%, #dce8e5 68% 100%);
}

.premium-operating-layer,
.premium-property,
.premium-control,
.premium-final-cta,
.public-site-premium .public-footer {
  width: min(1320px, calc(100% - 56px));
  margin: 0 auto;
}

.premium-operating-layer {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--premium-line);
  padding: 84px 0;
}

.premium-operating-layer h2,
.premium-property h2,
.premium-control h2,
.premium-final-cta h2 {
  margin: 0;
  color: var(--premium-ink);
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

.premium-operating-layer p,
.premium-property p,
.premium-control p,
.premium-final-cta p {
  margin: 20px 0 0;
  color: var(--premium-muted);
  font-size: 17px;
  line-height: 1.65;
}

.premium-layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--premium-line);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}

.premium-layer-grid article {
  min-height: 290px;
  padding: 28px;
  border-right: 1px solid var(--premium-line);
}

.premium-layer-grid article:last-child {
  border-right: 0;
}

.premium-layer-grid span {
  color: #3abf4b;
  font-size: 13px;
  font-weight: 820;
}

.premium-layer-grid h3 {
  margin: 72px 0 0;
  color: var(--premium-ink);
  font-size: 22px;
}

.premium-layer-grid p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.58;
}

.premium-property {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: stretch;
  border-top: 1px solid var(--premium-line);
  padding: 88px 0;
}

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

.premium-portal-grid article {
  display: grid;
  align-content: start;
  min-height: 330px;
  border: 1px solid #dfe9e6;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 248, .94));
  padding: 24px;
}

.premium-portal-grid article:nth-child(1) {
  background: linear-gradient(180deg, #ecf8ef, #ffffff);
}

.premium-portal-grid span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #e8f8ec;
  color: var(--premium-green);
}

.premium-portal-grid svg {
  width: 22px;
}

.premium-portal-grid h3 {
  margin: 68px 0 0;
  color: var(--premium-ink);
  font-size: 22px;
}

.premium-portal-grid p {
  margin-top: 14px;
  font-size: 14px;
}

.premium-control {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: center;
  border-top: 1px solid var(--premium-line);
  padding: 86px 0;
}

.premium-control ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-control li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 5px 18px;
  align-items: start;
  border: 1px solid #dfe9e6;
  border-radius: 18px;
  background: #fff;
  padding: 20px;
}

.premium-control li svg {
  grid-row: 1 / 3;
  width: 24px;
  margin: 3px 0 0;
  color: var(--premium-green);
}

.premium-control li strong {
  color: var(--premium-ink);
  font-size: 16px;
}

.premium-control li span {
  color: var(--premium-muted);
  font-size: 14px;
  line-height: 1.52;
}

.premium-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 10%, rgba(104, 214, 78, .18), transparent 32%),
    linear-gradient(135deg, #052c2d, #103334);
  padding: 54px;
  color: #fff;
}

.premium-final-cta h2 {
  max-width: 780px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
}

.premium-final-cta p {
  max-width: 650px;
  color: rgba(255, 255, 255, .72);
}

.premium-final-cta > div {
  display: flex;
  gap: 12px;
}

.premium-final-cta .public-primary {
  border-color: #69d44d;
  background: #69d44d;
  color: #062728;
  box-shadow: none;
}

.premium-final-cta .public-secondary {
  border-color: rgba(255, 255, 255, .34);
  background: transparent;
  color: #fff;
}

.public-site-premium .public-footer {
  min-height: 110px;
  margin-top: 54px;
  border-top: 1px solid var(--premium-line);
}

.public-site-premium .public-footer a {
  color: #40575b;
  text-decoration: none;
}

@media (max-width: 1120px) {
  .premium-hero,
  .premium-operating-layer,
  .premium-property,
  .premium-control,
  .premium-final-cta {
    grid-template-columns: 1fr;
  }

  .premium-hero {
    min-height: auto;
    gap: 48px;
  }

  .premium-product {
    min-height: auto;
  }

  .premium-floating-owner,
  .premium-floating-supplier,
  .premium-ai-card {
    position: static;
    width: auto;
    margin-top: 12px;
  }
}

@media (max-width: 980px) {
  .public-site-premium .public-nav nav a[href^="/#"],
  .public-site-premium .public-nav nav button,
  .public-site-premium .public-nav .public-signup,
  .public-site-premium .public-signup {
    display: none;
  }

  .premium-hero-copy h1 {
    max-width: 620px;
    font-size: clamp(46px, 10vw, 74px);
    line-height: .96;
  }

  .premium-hero-copy p {
    max-width: 620px;
  }
}

@media (max-width: 760px) {
  .public-site-premium .public-nav,
  .premium-hero,
  .premium-operating-layer,
  .premium-property,
  .premium-control,
  .premium-final-cta,
  .public-site-premium .public-footer {
    width: min(100% - 30px, 1320px);
  }

  .public-site-premium .public-nav {
    min-height: 72px;
  }

  .public-site-premium .public-logo img {
    width: 140px;
  }

  .public-site-premium .public-nav nav a[href^="/#"],
  .public-site-premium .public-nav nav button,
  .public-site-premium .public-nav .public-signup,
  .public-site-premium .public-signup {
    display: none;
  }

  .premium-hero {
    padding: 34px 0 58px;
  }

  .premium-hero-copy h1 {
    max-width: 360px;
    font-size: clamp(42px, 12vw, 54px);
    line-height: .97;
  }

  .premium-hero-copy p,
  .premium-operating-layer p,
  .premium-property p,
  .premium-control p,
  .premium-final-cta p {
    font-size: 16px;
  }

  .premium-hero-actions,
  .premium-final-cta > div {
    flex-direction: column;
    align-items: stretch;
  }

  .premium-quiet-link {
    justify-content: center;
  }

  .premium-hero-metrics,
  .premium-product-stats,
  .premium-product-main,
  .premium-layer-grid,
  .premium-portal-grid {
    grid-template-columns: 1fr;
  }

  .premium-product-shell {
    grid-template-columns: 1fr;
    transform: none;
  }

  .premium-product-shell::before {
    inset: -16px -10px auto 38%;
    height: 42%;
  }

  .premium-product-sidebar {
    min-height: auto;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
  }

  .premium-product-sidebar i {
    display: none;
  }

  .premium-layer-grid article {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--premium-line);
  }

  .premium-layer-grid article:last-child {
    border-bottom: 0;
  }

  .premium-portal-grid article {
    min-height: 240px;
  }

  .premium-final-cta {
    padding: 32px 22px;
  }
}

/* Delegate homepage rebuild */
.delegate-home {
  --home-ink: #061f20;
  --home-green: #103334;
  --home-accent: #66d84f;
  --home-muted: #596d72;
  --home-line: rgba(16, 51, 52, .13);
  --home-soft: #f5f8f6;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(16, 51, 52, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, #fff 0%, #fff 56%, #f7faf8 100%);
  color: var(--home-ink);
}

.delegate-home,
.delegate-home * {
  box-sizing: border-box;
}

.delegate-home img,
.delegate-home svg {
  max-width: 100%;
}

.delegate-home .public-nav {
  width: min(1320px, calc(100% - 56px));
  min-height: 84px;
  border-bottom: 1px solid var(--home-line);
}

.delegate-home .public-logo img {
  width: 168px;
}

.delegate-home .public-nav nav {
  gap: 8px;
}

.delegate-home .public-nav nav a,
.delegate-home .public-nav nav button {
  color: #223b3e;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.delegate-home .public-primary,
.delegate-home .public-nav nav button {
  border: 1px solid var(--home-green);
  border-radius: 10px;
  background: var(--home-green);
  color: #fff;
  box-shadow: 0 16px 34px rgba(16, 51, 52, .18);
}

.delegate-home .public-secondary,
.delegate-home .public-signin {
  border: 1px solid rgba(16, 51, 52, .24);
  border-radius: 10px;
  background: #fff;
  color: var(--home-green);
  box-shadow: none;
}

.delegate-home .public-signup {
  border: 1px solid #67d84f;
  border-radius: 10px;
  background: #67d84f;
  color: #062728;
}

.delegate-hero {
  width: min(1320px, calc(100% - 56px));
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(420px, .86fr) minmax(620px, 1.14fr);
  gap: 76px;
  align-items: center;
  margin: 0 auto;
  padding: 56px 0 72px;
}

.delegate-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(68px, 8vw, 118px);
  font-weight: 780;
  line-height: .9;
  letter-spacing: 0;
}

.delegate-hero h1::after {
  content: "";
  display: inline-block;
  width: .16em;
  height: .16em;
  margin-left: .08em;
  border-radius: 999px;
  background: var(--home-accent);
  vertical-align: baseline;
}

.delegate-hero-copy p {
  max-width: 650px;
  margin: 32px 0 0;
  color: #435b60;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.62;
}

.delegate-hero-copy,
.delegate-system-visual,
.delegate-visual-shell,
.delegate-section-copy,
.delegate-property-intro,
.delegate-control-section,
.delegate-final > div {
  min-width: 0;
}

.delegate-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}

.delegate-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--home-green);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.delegate-system-visual {
  position: relative;
}

.delegate-visual-shell {
  position: relative;
  display: grid;
  gap: 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 0%, rgba(103, 216, 79, .18), transparent 32%),
    linear-gradient(145deg, #062a2b, #0e3d3e 58%, #052526);
  box-shadow: 0 38px 94px rgba(16, 51, 52, .26);
  padding: 28px;
  color: #fff;
}

.delegate-visual-shell::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  pointer-events: none;
}

.delegate-visual-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
}

.delegate-visual-top span {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.delegate-visual-top strong {
  color: #fff;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 760;
}

.delegate-workflow-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 18px;
  background: rgba(255, 255, 255, .11);
  overflow: hidden;
}

.delegate-workflow-map article {
  display: grid;
  align-content: start;
  min-height: 220px;
  background: rgba(255, 255, 255, .06);
  padding: 22px;
}

.delegate-workflow-map article.active {
  background: rgba(103, 216, 79, .18);
}

.delegate-workflow-map span {
  color: rgba(255, 255, 255, .52);
  font-size: 12px;
  font-weight: 800;
}

.delegate-workflow-map strong {
  margin-top: 76px;
  color: #fff;
  font-size: 21px;
}

.delegate-workflow-map p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
  line-height: 1.5;
}

.delegate-visual-panels {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}

.delegate-document-panel,
.delegate-portal-panel {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  padding: 22px;
}

.delegate-document-panel > span,
.delegate-portal-panel > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 760;
}

.delegate-document-panel svg {
  width: 17px;
  color: var(--home-accent);
}

.delegate-document-panel strong {
  display: block;
  max-width: 360px;
  margin-top: 18px;
  color: #fff;
  font-size: 24px;
  line-height: 1.16;
}

.delegate-document-panel dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 22px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
}

.delegate-document-panel div {
  background: rgba(255, 255, 255, .08);
  padding: 14px;
}

.delegate-document-panel dt,
.delegate-document-panel dd {
  margin: 0;
}

.delegate-document-panel dt {
  color: rgba(255, 255, 255, .54);
  font-size: 11px;
}

.delegate-document-panel dd {
  margin-top: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 760;
}

.delegate-portal-panel p {
  margin: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 14px;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
}

.delegate-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.delegate-status-strip span {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .76);
  padding: 15px;
  font-size: 12px;
  font-weight: 680;
}

.delegate-clarity-band,
.delegate-operating-layer,
.delegate-property-section,
.delegate-control-section,
.delegate-final,
.delegate-home .public-footer {
  width: min(1320px, calc(100% - 56px));
  margin: 0 auto;
}

.delegate-clarity-band {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 40px;
  align-items: center;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  padding: 28px 0;
}

.delegate-clarity-band p {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 760;
  line-height: 1.12;
}

.delegate-clarity-band div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.delegate-clarity-band span {
  border: 1px solid var(--home-line);
  border-radius: 999px;
  background: #fff;
  color: #365256;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
}

.delegate-operating-layer {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 70px;
  align-items: start;
  padding: 94px 0;
}

.delegate-section-copy h2,
.delegate-property-intro h2,
.delegate-control-section h2,
.delegate-final h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 760;
  line-height: 1;
}

.delegate-section-copy p,
.delegate-property-intro p,
.delegate-control-grid p,
.delegate-final p {
  margin: 22px 0 0;
  color: var(--home-muted);
  font-size: 17px;
  line-height: 1.65;
}

.delegate-principles {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--home-line);
}

.delegate-principles article {
  display: grid;
  grid-template-columns: 74px minmax(0, .8fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  border-bottom: 1px solid var(--home-line);
  padding: 28px 0;
}

.delegate-principles span,
.delegate-property-intro > span {
  color: #26873b;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.delegate-principles h3 {
  margin: 0;
  color: var(--home-ink);
  font-size: 22px;
  line-height: 1.16;
}

.delegate-principles p {
  margin: 0;
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.56;
}

.delegate-property-section {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 58px;
  align-items: stretch;
  border-top: 1px solid var(--home-line);
  padding: 94px 0;
}

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

.delegate-portal-modules article {
  display: grid;
  align-content: start;
  min-height: 340px;
  border: 1px solid #dfe9e6;
  border-radius: 22px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 18px 46px rgba(16, 51, 52, .06);
}

.delegate-portal-modules article:first-child {
  background: linear-gradient(180deg, #effaf2, #fff);
}

.delegate-portal-modules div {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #e8f7eb;
  color: var(--home-green);
}

.delegate-portal-modules svg {
  width: 22px;
}

.delegate-portal-modules strong {
  margin-top: 88px;
  color: var(--home-ink);
  font-size: 22px;
}

.delegate-portal-modules p {
  margin: 14px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.58;
}

.delegate-control-section {
  border-top: 1px solid var(--home-line);
  padding: 94px 0;
}

.delegate-control-section h2 {
  max-width: 900px;
}

.delegate-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 38px;
}

.delegate-control-grid article {
  border: 1px solid #dfe9e6;
  border-radius: 20px;
  background: #fff;
  padding: 24px;
}

.delegate-control-grid span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #f0f6f2;
  color: var(--home-green);
}

.delegate-control-grid svg {
  width: 22px;
}

.delegate-control-grid strong {
  display: block;
  margin-top: 42px;
  color: var(--home-ink);
  font-size: 18px;
}

.delegate-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, rgba(103, 216, 79, .20), transparent 30%),
    linear-gradient(135deg, #052829, #103334);
  padding: 58px;
  color: #fff;
}

.delegate-final h2 {
  max-width: 860px;
  color: #fff;
}

.delegate-final p {
  max-width: 700px;
  color: rgba(255, 255, 255, .72);
}

.delegate-final .public-primary {
  border-color: var(--home-accent);
  background: var(--home-accent);
  color: #052829;
  box-shadow: none;
}

.delegate-home .public-footer {
  margin-top: 58px;
}

@media (max-width: 1100px) {
  .delegate-hero,
  .delegate-clarity-band,
  .delegate-operating-layer,
  .delegate-property-section,
  .delegate-final {
    grid-template-columns: 1fr;
  }

  .delegate-system-visual {
    max-width: 820px;
  }

  .delegate-clarity-band div {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .delegate-home .public-nav,
  .delegate-hero,
  .delegate-clarity-band,
  .delegate-operating-layer,
  .delegate-property-section,
  .delegate-control-section,
  .delegate-final,
  .delegate-home .public-footer {
    width: calc(100% - 30px);
    max-width: 1320px;
  }

  .delegate-home .public-nav {
    min-height: 72px;
    gap: 12px;
  }

  .delegate-home .public-logo img {
    width: 136px;
  }

  .delegate-home .public-nav nav {
    display: none !important;
  }

  .delegate-home .public-nav nav a[href^="/#"],
  .delegate-home .public-nav nav button,
  .delegate-home .public-signup,
  .delegate-home .public-signin {
    display: none;
  }

  .delegate-hero {
    min-height: auto;
    gap: 34px;
    padding: 36px 0 54px;
  }

  .delegate-hero h1 {
    max-width: 360px;
    font-size: clamp(44px, 12vw, 58px);
    line-height: .96;
  }

  .delegate-hero-copy p,
  .delegate-section-copy p,
  .delegate-property-intro p,
  .delegate-final p {
    font-size: 16px;
    max-width: 100%;
  }

  .delegate-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .delegate-text-link {
    justify-content: center;
  }

  .delegate-visual-shell {
    padding: 18px;
    border-radius: 22px;
  }

  .delegate-visual-top,
  .delegate-workflow-map,
  .delegate-visual-panels,
  .delegate-status-strip,
  .delegate-portal-modules,
  .delegate-control-grid,
  .delegate-document-panel dl {
    grid-template-columns: 1fr;
  }

  .delegate-workflow-map article {
    min-height: 150px;
  }

  .delegate-workflow-map strong {
    margin-top: 34px;
  }

  .delegate-principles article {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .delegate-portal-modules article {
    min-height: 230px;
  }

  .delegate-portal-modules strong {
    margin-top: 44px;
  }

  .delegate-final {
    padding: 34px 22px;
  }
}

/* Final cascade lock for the fresh public homepage */
.delegate-studio {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(115, 223, 80, .14), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfdfb 54%, #eef6f1 100%) !important;
  color: #062728;
}

.delegate-studio p,
.delegate-studio h1,
.delegate-studio h2,
.delegate-studio h3,
.delegate-studio li,
.delegate-studio a,
.delegate-studio button,
.delegate-studio span,
.delegate-studio strong {
  white-space: normal;
}

.delegate-studio .public-nav {
  width: 100%;
  max-width: none;
  min-height: 76px;
  margin: 0;
  padding: 0 clamp(26px, 6vw, 92px);
  border: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(115, 223, 80, .22), transparent 22%),
    linear-gradient(90deg, #052b2d, #073638 62%, #052829);
  box-shadow: 0 18px 60px rgba(6, 31, 32, .18);
}

.delegate-studio .public-logo {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  padding: 8px 12px 8px 10px;
}

.delegate-studio .public-logo img {
  width: 156px;
}

.delegate-studio .public-nav nav {
  gap: 10px;
}

.delegate-studio .public-nav nav a,
.delegate-studio .public-nav nav button {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
}

.delegate-studio .public-nav nav button,
.delegate-studio .public-primary {
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #6ee044, #2fb51b);
  color: #062728;
  box-shadow: 0 14px 34px rgba(47, 181, 27, .25);
  font-weight: 820;
}

.delegate-studio .public-signup,
.delegate-studio .public-secondary,
.delegate-studio .public-signin {
  min-height: 46px;
  border: 1px solid rgba(16, 51, 52, .24);
  border-radius: 10px;
  background: #fff;
  color: #103334;
  box-shadow: none;
  font-weight: 820;
}

.delegate-studio .public-nav .public-signup {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.delegate-studio .public-nav .public-signin {
  border: 0;
  background: transparent;
  color: #fff;
}

.delegate-studio .public-footer {
  width: min(1360px, calc(100% - 96px));
  margin: 0 auto;
  border-top: 1px solid rgba(16, 51, 52, .14);
  padding-top: 30px;
}

@media (max-width: 820px) {
  .delegate-studio .public-nav {
    min-height: 72px;
    padding: 0 16px;
  }

  .delegate-studio .public-nav nav {
    display: none;
  }

  .delegate-studio .public-logo img {
    width: 136px;
  }

  .delegate-studio .public-footer {
    width: calc(100% - 30px);
  }

  .delegate-studio .studio-hero,
  .delegate-studio .studio-portals,
  .delegate-studio .studio-workflow,
  .delegate-studio .studio-final {
    width: calc(100% - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .delegate-studio .studio-hero-copy,
  .delegate-studio .studio-hero-copy p,
  .delegate-studio .studio-workspace {
    width: 100%;
    max-width: calc(100vw - 30px) !important;
    min-width: 0;
  }

  .delegate-studio .studio-hero-copy p {
    width: min(330px, calc(100vw - 60px)) !important;
    max-width: min(330px, calc(100vw - 60px)) !important;
    overflow-wrap: break-word;
  }

  .delegate-studio .studio-hero-actions,
  .delegate-studio .studio-proof-list {
    width: min(360px, calc(100vw - 30px));
  }
}

/* Delegate public homepage - Stafflink-inspired, Delegate-branded */
.delegate-stafflink {
  --dsl-ink: #082b2d;
  --dsl-deep: #062829;
  --dsl-mid: #0f3f40;
  --dsl-green: #59d638;
  --dsl-soft: #f4f8f5;
  --dsl-line: rgba(8, 43, 45, .13);
  --dsl-muted: #65797d;
  --dsl-page-width: min(1260px, calc(100% - 80px));
  overflow-x: hidden;
  background: #fff;
  color: var(--dsl-ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.delegate-stafflink,
.delegate-stafflink * {
  box-sizing: border-box;
}

.delegate-stafflink h1,
.delegate-stafflink h2,
.delegate-stafflink h3,
.delegate-stafflink p,
.delegate-stafflink li,
.delegate-stafflink a,
.delegate-stafflink button,
.delegate-stafflink span,
.delegate-stafflink strong {
  white-space: normal !important;
}

.delegate-stafflink svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
}

.delegate-stafflink .public-nav {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: none;
  min-height: 82px;
  margin: 0;
  padding-inline: max(40px, calc((100% - 1260px) / 2));
  border: 0;
  border-bottom: 1px solid rgba(6, 40, 41, .1);
  background: #fff;
  box-shadow: 0 14px 44px rgba(6, 40, 41, .08);
}

.delegate-stafflink .public-logo {
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.delegate-stafflink .public-logo img {
  width: 158px;
}

.delegate-stafflink .public-nav nav {
  gap: 8px;
}

.delegate-stafflink .public-nav nav a,
.delegate-stafflink .public-nav nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 128px;
  width: 128px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(16, 51, 52, .22);
  border-radius: 9px;
  background: #fff;
  color: var(--dsl-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.delegate-stafflink .public-nav nav button {
  border-color: rgba(16, 51, 52, .9);
  background: #103334;
  color: #fff;
  box-shadow: 0 14px 34px rgba(16, 51, 52, .2);
}

.delegate-stafflink .public-nav nav a.public-signup {
  background: #fff;
  color: var(--dsl-ink);
  box-shadow: none;
}

.delegate-stafflink .public-nav nav a.public-signin {
  background: #fff;
  color: var(--dsl-ink);
}

.stafflink-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 14%, rgba(89, 214, 56, .23), transparent 28%),
    linear-gradient(135deg, #062829 0%, #0b3b3d 54%, #062829 100%);
  color: #fff;
  margin-top: 0;
}

.stafflink-hero::after {
  content: "";
  position: absolute;
  right: -7vw;
  bottom: -120px;
  width: 52vw;
  height: 260px;
  background: #fff;
  transform: skewY(-7deg);
  transform-origin: right bottom;
}

.stafflink-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(560px, 1.18fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: center;
  width: var(--dsl-page-width);
  min-height: 670px;
  margin: 0 auto;
  padding: 80px 0 105px;
}

.stafflink-hero-copy h1 {
  margin: 0;
  max-width: 680px;
  color: #fff;
  font-size: clamp(58px, 6.4vw, 106px);
  font-weight: 820;
  line-height: .93;
  letter-spacing: 0;
}

.stafflink-subline {
  margin: 24px 0 0;
  color: #96f078;
  font-size: 17px;
  font-weight: 600;
}

.stafflink-hero-copy > p:not(.stafflink-subline) {
  max-width: 580px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 18px;
  line-height: 1.65;
}

.stafflink-hero-actions,
.stafflink-final div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}

.stafflink-primary,
.stafflink-secondary,
.stafflink-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 9px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.stafflink-hero .stafflink-primary,
.stafflink-hero .stafflink-secondary {
  width: 150px;
  border: 1px solid rgba(255, 255, 255, .68);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.stafflink-primary {
  border: 0;
  background: #103334;
  color: #fff;
  box-shadow: 0 18px 44px rgba(16, 51, 52, .24);
}

.stafflink-secondary {
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}

.stafflink-text {
  color: var(--dsl-ink);
}

.stafflink-composition {
  position: relative;
  min-height: 500px;
}

.stafflink-property-image {
  position: absolute;
  inset: 42px 0 18px 78px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 34px 88px rgba(0, 0, 0, .24);
}

.stafflink-property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
  transform: scale(1.035);
  animation: delegateHeroImageDrift 18s ease-in-out infinite alternate;
}

.stafflink-float-card {
  position: absolute;
  width: min(280px, 42%);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  color: var(--dsl-ink);
  padding: 18px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .18);
  animation: delegateCardFloat 8s ease-in-out infinite;
}

.stafflink-float-card span {
  color: #289b22;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stafflink-float-card strong {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 650;
}

.stafflink-float-card p {
  margin: 8px 0 0;
  color: var(--dsl-muted);
  font-size: 14px;
}

.card-request {
  left: 0;
  top: 0;
  animation-delay: 0s;
}

.card-approval {
  right: 18px;
  top: 78px;
  animation-delay: 1.4s;
}

.card-invoice {
  left: 60px;
  bottom: 0;
  animation-delay: 2.8s;
}

@keyframes delegateCardFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .18);
  }
  50% {
    transform: translate3d(0, -10px, 0);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .22);
  }
}

@keyframes delegateHeroImageDrift {
  0% {
    transform: scale(1.035) translate3d(-8px, 0, 0);
  }
  100% {
    transform: scale(1.07) translate3d(10px, -8px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stafflink-float-card,
  .stafflink-property-image img {
    animation: none;
  }
}

.stafflink-proof {
  display: grid;
  grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  width: var(--dsl-page-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--dsl-line);
  background: #fff;
  padding: 32px 0;
}

.stafflink-proof p {
  margin: 0;
  color: #718489;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stafflink-proof ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stafflink-proof li {
  display: grid;
  place-items: center;
  min-height: 66px;
  border: 1px solid rgba(8, 43, 45, .09);
  border-radius: 15px;
  background: #fff;
  color: #244245;
  padding: 10px 14px;
  box-shadow: 0 16px 36px rgba(8, 43, 45, .045);
}

.stafflink-proof li.logo-on-dark,
.stafflink-proof li.logo-on-black {
  border-color: rgba(255, 255, 255, .1);
  background: #050505;
  box-shadow: 0 18px 42px rgba(8, 43, 45, .12);
}

.stafflink-proof img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 130px;
  max-height: 40px;
  object-fit: contain;
  filter: saturate(.92);
}

.stafflink-proof img.stone-logo {
  max-width: 112px;
  max-height: 46px;
}

.stafflink-proof img.lj-hooker-logo {
  max-width: 126px;
  max-height: 36px;
}

.logo-wordmark {
  color: #142d31;
  font-size: 22px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.logo-wordmark span {
  display: block;
  margin-top: 5px;
  color: #7b8c8f;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.stafflink-intro,
.stafflink-control,
.stafflink-portals,
.stafflink-final,
.delegate-stafflink .public-footer {
  width: var(--dsl-page-width);
  margin: 0 auto;
  min-width: 0;
}

.stafflink-intro {
  display: grid;
  grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
  gap: 54px;
  align-items: start;
  padding: 88px 0;
}

.stafflink-intro h2,
.stafflink-control h2,
.stafflink-portals h2,
.stafflink-final h2 {
  margin: 0;
  color: var(--dsl-ink);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.stafflink-intro > div > p,
.stafflink-control p,
.stafflink-final p {
  margin: 22px 0 0;
  color: var(--dsl-muted);
  font-size: 17px;
  line-height: 1.65;
}

.stafflink-intro > div,
.stafflink-control > div,
.stafflink-portals > div,
.stafflink-final > div {
  min-width: 0;
}

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

.stafflink-intro-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe8e5;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(89, 214, 56, .16), transparent 34%),
    linear-gradient(180deg, #fff, #f7fbf8);
  padding: 24px;
  box-shadow: 0 18px 48px rgba(8, 43, 45, .06);
}

.stafflink-intro-grid article::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -34px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  border: 1px solid rgba(89, 214, 56, .26);
}

.stafflink-intro-grid span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #eaf9e8;
  color: #289b22;
  font-size: 22px;
}

.stafflink-intro-grid small {
  position: absolute;
  top: 27px;
  right: 24px;
  color: rgba(8, 43, 45, .24);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.stafflink-intro-grid strong {
  display: block;
  margin-top: 36px;
  color: var(--dsl-ink);
  font-size: 22px;
  font-weight: 650;
}

.stafflink-intro-grid p {
  margin: 12px 0 0;
  color: var(--dsl-muted);
  font-size: 15px;
  line-height: 1.58;
}

.stafflink-intro-grid em {
  display: inline-flex;
  margin-top: 22px;
  border-radius: 999px;
  background: rgba(16, 51, 52, .07);
  color: #244245;
  padding: 8px 11px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.stafflink-control {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 58px;
  align-items: center;
  padding: 78px 0;
}

.stafflink-control-graphic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 12%, rgba(89, 214, 56, .26), transparent 30%),
    linear-gradient(135deg, #062829, #0d4242);
  padding: 28px;
}

.stafflink-control-graphic div {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  padding: 22px;
  color: #fff;
}

.stafflink-control-graphic div::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(89, 214, 56, .15), rgba(89, 214, 56, .95), rgba(255, 255, 255, .35));
  transform-origin: left;
  animation: delegateMetricPulse 3.4s ease-in-out infinite;
}

.stafflink-control-graphic span {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 600;
}

.stafflink-control-graphic strong {
  display: block;
  margin-top: 34px;
  color: #fff;
  font-size: 52px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stafflink-control .stafflink-primary,
.stafflink-final .stafflink-primary {
  margin-top: 28px;
}

.stafflink-portals {
  border-top: 1px solid var(--dsl-line);
  padding: 82px 0;
}

.stafflink-portals > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.stafflink-portals article {
  overflow: visible;
  border: 1px solid #dfe8e5;
  border-radius: 22px;
  background: #fff;
  padding: 0 0 26px;
  box-shadow: 0 18px 48px rgba(8, 43, 45, .06);
}

.portal-card-image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 188px;
  border-radius: 22px 22px 0 0;
}

.portal-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portal-card-image.portal-supplier img {
  object-position: 52% 18%;
}

.stafflink-portals article span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: -25px 26px 0;
  border-radius: 999px;
  background: #eaf9e8;
  color: #289b22;
  box-shadow: 0 12px 28px rgba(8, 43, 45, .1);
}

.stafflink-portals strong {
  display: block;
  margin: 22px 26px 0;
  color: var(--dsl-ink);
  font-size: 22px;
  font-weight: 650;
}

.stafflink-portals p {
  margin: 12px 26px 0;
  color: var(--dsl-muted);
  font-size: 15px;
  line-height: 1.58;
}

.stafflink-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "copy actions";
  gap: 28px;
  align-items: end;
  margin-bottom: 56px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 15%, rgba(89, 214, 56, .25), transparent 28%),
    linear-gradient(135deg, #062829, #0b3b3d);
  padding: 58px;
  color: #fff;
}

.stafflink-final h2 {
  grid-area: title;
  max-width: 860px;
  color: #fff;
}

.stafflink-final p {
  grid-area: copy;
  max-width: 760px;
  color: rgba(255, 255, 255, .76);
}

.stafflink-final > div {
  grid-area: actions;
  align-self: end;
  justify-self: end;
  flex-wrap: nowrap;
  margin-top: 0;
}

.stafflink-final .stafflink-secondary {
  color: #fff;
}

.stafflink-final .stafflink-text {
  color: rgba(255, 255, 255, .9);
}

.stafflink-final .stafflink-primary {
  width: 150px;
  border: 1px solid rgba(255, 255, 255, .68);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.stafflink-final .stafflink-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 9px;
  background: var(--dsl-green);
  color: #fff;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.delegate-stafflink .public-footer {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 46px;
  border-top: 1px solid var(--dsl-line);
  padding: 46px 0 28px;
}

.public-footer-brand img {
  width: 170px;
}

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

.public-footer-grid nav {
  display: grid;
  gap: 10px;
  align-content: start;
}

.public-footer-grid strong {
  color: var(--dsl-ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.public-footer-grid a,
.public-footer-grid button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #61777b;
  padding: 0;
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

@keyframes delegateMetricPulse {
  0%, 100% {
    transform: scaleX(.32);
    opacity: .58;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (max-width: 1080px) {
  .stafflink-hero-inner,
  .stafflink-proof,
  .stafflink-intro,
  .stafflink-control,
  .stafflink-final,
  .delegate-stafflink .public-footer {
    grid-template-columns: 1fr;
  }

  .stafflink-composition {
    min-height: 460px;
  }

  .stafflink-property-image {
    left: 52px;
  }

  .stafflink-intro-grid,
  .stafflink-portals > div {
    grid-template-columns: 1fr;
  }

  .stafflink-proof ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .delegate-stafflink {
    --dsl-page-width: calc(100vw - 30px);
    max-width: 100vw;
    overflow-x: clip;
  }

  .delegate-stafflink > * {
    max-width: 100vw;
  }

  .delegate-stafflink .public-nav {
    min-height: 72px;
    padding-inline: 15px;
  }

  .delegate-stafflink .public-logo img {
    width: 136px;
  }

  .delegate-stafflink .public-nav nav {
    display: none;
  }

  .stafflink-hero-inner,
  .stafflink-intro,
  .stafflink-control,
  .stafflink-portals,
  .stafflink-final,
  .delegate-stafflink .public-footer {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px);
  }

  .stafflink-hero-copy {
    max-width: calc(100vw - 48px);
  }

  .stafflink-hero-inner {
    min-height: auto;
    padding: 46px 0 70px;
  }

  .stafflink-hero-copy h1 {
    max-width: calc(100vw - 48px);
    font-size: clamp(40px, 11.2vw, 50px);
    line-height: 1.02;
  }

  .stafflink-subline {
    font-size: 14px;
  }

  .stafflink-hero-copy > p:not(.stafflink-subline) {
    max-width: calc(100vw - 56px);
    font-size: 16px;
  }

  .stafflink-hero-actions,
  .stafflink-final div {
    flex-direction: column;
    align-items: stretch;
  }

  .stafflink-composition {
    display: grid;
    gap: 14px;
    max-width: calc(100vw - 30px);
    min-height: auto;
  }

  .stafflink-property-image {
    position: relative;
    inset: auto;
    order: 2;
    height: 250px;
    border-radius: 22px;
  }

  .stafflink-float-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
  }

  .card-request {
    order: 1;
  }

  .card-approval {
    order: 3;
  }

  .card-invoice {
    order: 4;
  }

  .stafflink-proof {
    padding: 30px 18px;
    overflow: hidden;
  }

  .stafflink-proof p {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .stafflink-proof ul {
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
  }

  .stafflink-proof li {
    min-height: 58px;
    padding: 8px;
  }

  .stafflink-intro-grid article,
  .stafflink-portals article {
    width: 100%;
    max-width: 100%;
  }

  .stafflink-intro-grid article {
    padding: 22px 18px;
  }

  .stafflink-intro-grid p,
  .stafflink-portals p {
    max-width: min(260px, 100%);
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: 14px;
  }

  .stafflink-proof img {
    max-width: 104px;
    max-height: 34px;
  }

  .logo-wordmark {
    font-size: 18px;
  }

  .stafflink-intro,
  .stafflink-control,
  .stafflink-portals {
    padding: 58px 0;
  }

  .stafflink-intro h2,
  .stafflink-control h2,
  .stafflink-portals h2,
  .stafflink-final h2 {
    max-width: 100%;
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.04;
    overflow-wrap: break-word;
  }

  .stafflink-intro h2 {
    max-width: 315px;
  }

  .stafflink-intro > div > p,
  .stafflink-control p,
  .stafflink-final p {
    max-width: 330px;
    overflow-wrap: break-word;
  }

  .stafflink-intro-grid,
  .stafflink-control-graphic,
  .stafflink-portals > div {
    max-width: 100%;
    overflow: hidden;
  }

  .stafflink-control-graphic {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .stafflink-control-graphic div {
    min-height: 110px;
  }

  .stafflink-control-graphic strong {
    margin-top: 18px;
    font-size: 40px;
  }

  .stafflink-final {
    grid-template-areas:
      "title"
      "copy"
      "actions";
    padding: 34px 24px;
  }

  .stafflink-final > div {
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .public-footer-grid {
    grid-template-columns: 1fr;
  }

}

.record-subtabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.record-subtabs button {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #4f5f6e;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.record-subtabs button.active {
  color: var(--heading);
  border-color: #cfe0ef;
  background: #f3f7fb;
  box-shadow: 0 1px 2px rgba(15, 33, 48, .04);
}

.property-context-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.property-context-tabs button {
  min-height: 46px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: #2f3f4b;
  padding: 8px 10px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15, 33, 48, .035);
  cursor: pointer;
}

.property-context-tabs button:hover {
  border-color: #cbd8e2;
  background: #fbfcfd;
}

.property-context-tabs button.active {
  border-color: #b9d2ca;
  background: #f2f8f5;
  box-shadow: 0 0 0 1px rgba(26, 132, 92, .08), 0 8px 20px rgba(16, 51, 52, .06);
}

.property-context-tabs strong,
.property-context-tabs em {
  display: block;
}

.property-context-tabs strong {
  overflow: hidden;
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-context-tabs em {
  min-width: 22px;
  border-radius: 999px;
  background: #edf3f6;
  color: #425466;
  padding: 2px 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.property-context-tabs button.active em {
  background: #dcefe7;
  color: var(--green-dark);
}

.property-context-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f2f5f7;
  color: #50606e;
}

.property-context-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

.property-context-tabs button.active .property-context-icon {
  background: #dff1e9;
  color: var(--green-dark);
}

.property-linked-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 18px;
}

.property-linked-panel .owner-tab-heading {
  align-items: center;
}

.property-linked-table-frame {
  border-radius: var(--radius-md);
}

.property-linked-table .badge {
  width: fit-content;
}

.property-bills-table td .badge + span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.property-tab-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.property-maintenance-scope {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.property-maintenance-scope button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #4c5b66;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.property-maintenance-scope button:last-child {
  border-right: 0;
}

.property-maintenance-scope button.active {
  background: #f1f5f7;
  color: var(--heading);
}

.property-maintenance-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.property-maintenance-link span,
.property-maintenance-link em {
  min-width: 0;
}

.property-maintenance-thumb {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce6ec;
  border-radius: 10px;
  background: #f4f7f8;
  color: #60707d;
}

.property-maintenance-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-maintenance-thumb svg {
  width: 17px;
  height: 17px;
}

.property-preferences-panel {
  background: #fbfcfd;
}

.property-preferences-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.property-preferences-note {
  display: grid;
  gap: 3px;
  border: 1px solid #dbe8f1;
  border-radius: var(--radius-md);
  background: #f2f8fc;
  padding: 12px 14px;
}

.property-preferences-note strong,
.property-preferences-note span {
  display: block;
}

.property-preferences-note strong {
  color: var(--heading);
  font-size: 13px;
  font-weight: 720;
}

.property-preferences-note span {
  color: #5f7080;
  font-size: 12px;
  font-weight: 560;
  line-height: 1.45;
}

.properties-map-section {
  position: relative;
  display: block;
}

.properties-map-filters {
  position: absolute;
  z-index: 420;
  top: 14px;
  right: 14px;
  max-width: calc(100% - 28px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  justify-content: flex-end;
  border: 1px solid rgba(215, 226, 232, .9);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
  padding: 10px;
  backdrop-filter: blur(10px);
}

.properties-map-filters label {
  display: grid;
  gap: 4px;
  min-width: 170px;
}

.properties-map-filters label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.properties-map-filters select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 34px 0 11px;
  color: var(--heading);
  font-size: 13px;
  font-weight: 650;
}

.properties-map-filters .map-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
}

.properties-map-filters .map-toggle span {
  color: var(--heading);
  font-size: 13px;
  font-weight: 650;
}

.properties-map-shell {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #eef5f5;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.properties-osm-map {
  min-height: min(80vh, 820px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #f3f7f8;
}

.delegate-map-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px !important;
  height: 22px !important;
  margin-left: -11px !important;
  margin-top: -20px !important;
  border: 2px solid #fff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .2);
}

.delegate-map-marker::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(15, 139, 120, .24);
  animation: delegate-map-pulse 1.9s ease-out infinite;
}

.delegate-map-marker.is-office::before {
  background: rgba(47, 117, 221, .24);
}

.delegate-map-marker span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: inherit;
}

.delegate-map-marker svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 2.3;
}

.delegate-map-marker.is-property span {
  background: #0f8b78;
}

.delegate-map-marker.is-office span {
  background: #2f75dd;
}

@keyframes delegate-map-pulse {
  0% {
    opacity: .55;
    transform: scale(.72);
  }
  72%,
  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}

.properties-map-popup {
  display: grid;
  gap: 4px;
  min-width: 190px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
}

.properties-map-popup strong {
  color: var(--heading);
  font-size: 13px;
  font-weight: 760;
}

.properties-map-popup span {
  display: block;
}

.properties-map-popup-action {
  justify-self: start;
  margin-top: 6px;
  min-height: 32px;
  padding: 0 11px;
  font-size: 12px;
}

.delegate-map-council-tooltip {
  border: 1px solid rgba(15, 51, 52, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--heading);
  font-size: 11px;
  font-weight: 700;
}

.delegate-map-council-label {
  max-width: 150px;
  border: 1px solid rgba(15, 51, 52, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
  color: #193b3c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.15;
  padding: 4px 8px;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.delegate-map-council-label::before {
  display: none;
}

.property-financials-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 14px;
}

.property-financials-card.property-expense-snapshot {
  padding: 14px;
}

.property-financials-heading {
  margin-bottom: 0;
}

.property-financials-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.property-financials-summary div {
  display: grid;
  gap: 3px;
  border: 1px solid #e4ebf0;
  border-radius: 8px;
  background: #f8fafb;
  padding: 10px;
}

.property-financials-summary span,
.property-financials-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 560;
}

.property-financials-summary strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--heading);
  font-size: 17px;
  font-weight: 720;
}

.finance-trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid #dde7ee;
  border-radius: 999px;
  background: #fff;
}

.finance-trend span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.finance-trend i {
  display: block;
  width: 0;
  height: 0;
}

.finance-trend-up {
  border-color: #b8e5c2;
  background: #f0fbf2;
}

.finance-trend-up i {
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 7px solid #1f9d55;
}

.finance-trend-down {
  border-color: #fac8c8;
  background: #fff5f5;
}

.finance-trend-down i {
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 7px solid #dc2626;
}

.finance-trend-same i {
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: #8a98a5;
}

.property-financials-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.property-money-activity {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e7eef3;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfcfd 0%, #fff 100%);
  padding: 12px;
}

.property-money-activity header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--heading);
  font-size: 13px;
  font-weight: 700;
}

.property-money-activity header span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.property-money-activity header i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.property-money-activity header .income {
  background: #8fc15f;
}

.property-money-activity header .expense {
  background: #e34d5e;
}

.property-money-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  min-height: 190px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, .08) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  padding: 10px 8px 8px;
}

.property-expense-trend-line {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 8px;
  bottom: 28px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 38px);
  overflow: visible;
  pointer-events: none;
}

.property-expense-trend-line path {
  fill: none;
  stroke: #d92d20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
  filter: none;
  vector-effect: non-scaling-stroke;
}

.property-expense-trend-line.is-loading path {
  stroke: rgba(217, 45, 32, .28);
}

.property-money-month {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(135px, 1fr) auto;
  gap: 7px;
  align-items: end;
  min-width: 0;
}

.property-money-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  height: 135px;
  min-width: 0;
}

.property-money-bars span {
  width: 8px;
  min-height: 3px;
  border-radius: 999px 999px 3px 3px;
}

.property-money-bars .income {
  background: #8fc15f;
}

.property-money-bars [data-finance-tooltip] {
  cursor: help;
}

.property-money-bars [data-finance-tooltip]:focus-visible {
  outline: 2px solid rgba(15, 51, 52, .28);
  outline-offset: 3px;
}

.property-money-bars .expense {
  background: #e34d5e;
}

.property-money-bars .expense-stack {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  background: #f0f3f6;
}

.property-money-bars .expense-stack i {
  display: block;
  width: 100%;
  min-height: 3px;
  border-top: 1px solid rgba(255, 255, 255, .72);
}

.property-money-bars .expense-stack i:first-child {
  border-top: 0;
}

.finance-chart-tooltip {
  position: fixed;
  z-index: 12000;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(15, 51, 52, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
  padding: 10px 12px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}

.finance-chart-tooltip strong {
  color: var(--heading);
  font-size: 12px;
  font-weight: 760;
}

.finance-chart-tooltip span {
  color: var(--muted);
  font-weight: 600;
}

.property-money-month strong {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-money-account-strip {
  display: grid;
  gap: 9px;
  border-top: 1px solid #e7eef3;
  padding-top: 10px;
}

.property-money-account-strip > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.property-money-account-strip > div:first-child strong {
  color: var(--heading);
  font-size: 12px;
  font-weight: 720;
}

.property-money-account-strip > div:first-child span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
}

.property-money-account-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.property-money-account-list > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  border: 1px solid #e4ebf0;
  border-radius: 8px;
  background: #fff;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
}

.property-money-account-list > span > i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #eef2f5;
}

.property-money-account-list > span > b {
  overflow: hidden;
  color: var(--heading);
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-money-account-list > span > em {
  color: var(--heading);
  font-style: normal;
  font-weight: 720;
  white-space: nowrap;
}

.property-financials-card.is-loading .property-money-bars span,
.property-finance-skeleton {
  background: linear-gradient(90deg, #edf3f7 0%, #f7fafc 45%, #edf3f7 90%);
  background-size: 220% 100%;
  animation: delegate-grid-skeleton 1.25s linear infinite;
}

.property-finance-skeleton {
  display: inline-block;
  border-radius: 999px;
}

.property-finance-skeleton.value {
  width: 72%;
  height: 17px;
}

.property-finance-skeleton.hint {
  width: 86%;
  height: 10px;
}

.property-finance-skeleton.chip {
  width: 76px;
  height: 10px;
}

.property-finance-skeleton.amount {
  width: 42px;
  height: 10px;
}

.property-money-account-list .loading-chip > i {
  background: #e9eff4;
}

.property-financials-skeleton-table {
  display: grid;
  gap: 8px;
  border: 1px solid #e7eef3;
  border-radius: 12px;
  background: #fbfcfd;
  padding: 12px;
}

.property-financials-skeleton-table-head,
.property-financials-skeleton-table-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr .8fr;
  gap: 10px;
}

.property-financials-skeleton-table span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf3f7 0%, #f7fafc 45%, #edf3f7 90%);
  background-size: 220% 100%;
  animation: delegate-grid-skeleton 1.25s linear infinite;
}

.property-financials-skeleton-table-head span {
  height: 10px;
  opacity: .8;
}

.property-financials-empty-state {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed #d8e3e9;
  border-radius: 12px;
  background: #fbfcfd;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

@media (max-width: 680px) {
  .property-financials-summary {
    grid-template-columns: 1fr;
  }

  .properties-map-filters {
    position: static;
    margin-bottom: 10px;
  }
}

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

.property-linked-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
}

.property-linked-row:hover {
  border-color: #c9d8e7;
  background: #f8fafc;
}

.property-linked-row strong,
.property-linked-row span {
  display: block;
}

.property-linked-row strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 700;
}

.property-linked-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.asset-register-page,
.owner-assets-panel,
.tenant-assets-panel,
.recurring-services-page,
.owner-recurring-services-panel,
.recurring-services-operational {
  display: grid;
  gap: 14px;
}

.asset-register-hero {
  align-items: center;
  justify-content: space-between;
}

.recurring-services-intro {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(26, 44, 54, .04);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 16px;
}

.recurring-services-intro strong {
  color: var(--heading);
  display: block;
  font-size: 16px;
  margin-bottom: 3px;
}

.recurring-services-intro p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.recurring-service-modal {
  max-height: min(820px, calc(100vh - 36px));
  overflow: auto;
  width: min(920px, 100%);
}

.recurring-service-modal header h2,
.recurring-service-modal header p {
  margin: 0;
}

.recurring-service-modal header h2 {
  color: var(--heading);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 0;
}

.recurring-service-modal header p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.recurring-service-modal .recurring-service-form {
  margin-top: 16px;
}

.recurring-service-modal .asset-form-grid label span {
  color: #536672;
  font-weight: 650;
}

.recurring-service-modal .workflow-actions {
  margin-top: 18px;
  padding-top: 4px;
}

.asset-register-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.asset-card,
.recurring-service-card,
.recurring-suggestion-card,
.asset-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(26, 44, 54, .05);
}

.asset-card,
.recurring-service-card,
.recurring-suggestion-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-left: 4px solid #94a3b8;
}

.asset-card.warranty-normal { border-left-color: #22c55e; }
.asset-card.warranty-moderate { border-left-color: #f59e0b; }
.asset-card.warranty-important { border-left-color: #ef4444; }
.asset-card.warranty-neutral { border-left-color: #94a3b8; }
.recurring-service-card.warranty-normal,
.recurring-suggestion-card.warranty-normal { border-left-color: #22c55e; }
.recurring-service-card.warranty-moderate,
.recurring-suggestion-card.warranty-moderate { border-left-color: #f59e0b; }
.recurring-service-card.warranty-important,
.recurring-suggestion-card.warranty-important { border-left-color: #ef4444; }
.recurring-service-card.warranty-neutral,
.recurring-suggestion-card.warranty-neutral { border-left-color: #94a3b8; }

.asset-card.compact,
.recurring-service-card.compact {
  padding: 12px;
  gap: 10px;
}

.asset-card header,
.recurring-service-card header,
.asset-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.asset-card-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.asset-card-title > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border: 1px solid #cfe1e7;
  border-radius: 10px;
  background: #f2f8fb;
  color: #25637a;
  font-style: normal;
}

.asset-card-title > i svg {
  width: 19px;
  height: 19px;
}

.asset-card header strong,
.recurring-service-card header strong,
.recurring-suggestion-card strong,
.asset-panel h2 {
  display: block;
  margin: 2px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.asset-card header span,
.recurring-service-card header span,
.asset-panel header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.asset-card header em,
.recurring-service-card header em,
.recurring-suggestion-card em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.asset-card-header-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.asset-delete-button {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #64737a;
  background: #fff;
  border-color: var(--line);
}

.asset-delete-button:hover {
  color: #b42318;
  border-color: #fecaca;
  background: #fff5f5;
}

.recurring-suggestion-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.asset-badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

.asset-card-grid div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.asset-card-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.asset-card-grid dd {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.related-asset-panel {
  gap: 11px;
}

.related-asset-blue {
  border: 1px solid #cfe0ef;
  border-radius: var(--radius-md);
  background: #f2f8ff;
}

.related-asset-blue > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.related-asset-blue > header span {
  color: #47759d;
}

.related-asset-blue > header h2 {
  color: #19384e;
}

.job-asset-link-box {
  display: grid;
  gap: 10px;
  border: 1px solid #cfe0ef;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.job-asset-link-copy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.job-asset-link-copy > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid #cfe0ef;
  border-radius: 10px;
  background: #eaf4ff;
  color: #285f91;
}

.job-asset-link-copy svg {
  width: 17px;
  height: 17px;
}

.job-asset-link-copy div,
.job-asset-selector {
  min-width: 0;
}

.job-asset-link-copy strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.job-asset-link-copy em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.job-asset-selector {
  display: grid;
  gap: 6px;
}

.job-asset-selector > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.job-asset-state {
  display: grid;
  gap: 4px;
  border: 1px solid #e0e8ef;
  border-radius: 10px;
  background: #fff;
  padding: 11px 12px;
}

.related-asset-helper {
  color: var(--helper-text);
  font-size: var(--helper-size);
  font-weight: var(--helper-weight);
  line-height: 1.45;
  margin: 0;
}

.job-asset-state strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.job-asset-state span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.job-asset-state.moderate {
  border-color: #fde3a7;
  background: #fffaf0;
}

.asset-panel .field-label select,
.asset-quick-form input,
.asset-quick-form select,
.asset-quick-form textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 42px;
  padding: 9px 10px;
  width: 100%;
}

.asset-quick-form textarea {
  line-height: 1.45;
}

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

.asset-form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-form-grid .span-2 {
  grid-column: 1 / -1;
}

.asset-form-grid textarea {
  min-height: 72px;
  resize: vertical;
}

.asset-recommendation,
.asset-safe-guide,
.asset-tax-note,
.asset-tax-banner {
  border-radius: 8px;
  background: #f7faf9;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
}

.asset-recommendation {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--green);
}

.asset-recommendation strong,
.asset-tax-banner {
  color: var(--text);
}

.asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Final mobile override: keep iPhone table/list behaviour stable after older module rules. */
@media (max-width: 760px) {
  .app-shell {
    min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  }

  .topbar {
    top: var(--safe-top);
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  .workspace {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    padding-bottom: calc(28px + var(--safe-bottom));
  }

  .property-context-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .property-context-tabs button {
    min-height: 44px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 8px 9px;
  }

  .property-context-icon {
    width: 24px;
    height: 24px;
  }

  .property-gnaf-card {
    margin-left: 12px;
    margin-right: 12px;
  }

  .table-workspace {
    height: auto;
    min-height: calc(100dvh - 64px - var(--safe-top));
    overflow: visible;
  }

  .table-frame {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .table-frame .mobile-card-table {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: auto;
  }

  .mobile-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mobile-card-table tbody {
    display: grid;
    gap: 10px;
  }

  .mobile-card-table tbody tr:not(.table-group-row) {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(26, 44, 54, .05);
  }

  .mobile-card-table tbody tr[hidden] {
    display: none;
  }

  .mobile-card-table th,
  .mobile-card-table td {
    width: auto !important;
    min-width: 0 !important;
  }

  .mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 7px 0;
    border: 0;
    white-space: normal;
  }

  .mobile-card-table td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  .mobile-card-table td.select-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .mobile-card-table td.select-cell::before,
  .mobile-card-table td:empty::before {
    display: none;
  }

  .mobile-card-table .table-link,
  .mobile-card-table .table-link span,
  .mobile-card-table td strong,
  .mobile-card-table td span,
  .mobile-card-table td em,
  .mobile-card-table td a {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .asset-register-hero,
  .asset-card header,
  .asset-panel > header {
    align-items: stretch;
    flex-direction: column;
  }

  .asset-register-grid,
  .asset-form-grid,
  .asset-card-grid {
    grid-template-columns: 1fr;
  }
}