:root {
  --ink: #17201b;
  --muted: #657168;
  --line: #d8ded8;
  --panel: #ffffff;
  --page: #f5f7f2;
  --accent: #157a62;
  --accent-strong: #0e5d4b;
  --success: #16845f;
  --success-surface: #eef9f4;
  --critical: #9b2f1f;
  --critical-strong: #a52a1f;
  --critical-border: #efb4a5;
  --critical-border-strong: #d65a4a;
  --critical-surface: #fff1ee;
  --critical-surface-subtle: #fff5f2;
  --info-border: #bad4ee;
  --info-border-strong: #a9d0ff;
  --info-surface: #eef7ff;
  --info-text: var(--blue);
  --marketing-nav-bg: #286151;
  --pricing-hero-bg: #1f4b3f;
  --marketing-nav-link: #f7fbf7;
  --marketing-nav-active: #ffd166;
  --page-title-color: #0e5d4b;
  --button-primary-bg: var(--accent);
  --button-pressed-bg: #0e5d4b;
  --button-pressed-border: #0e5d4b;
  --button-pressed-text: #ffffff;
  --button-primary-hover-bg: #0e6d58;
  --button-primary-hover-border: #0e6d58;
  --button-primary-pressed-bg: #ffffff;
  --button-primary-pressed-text: #0e5d4b;
  --button-secondary-hover-bg: #e9f3ef;
  --button-secondary-hover-border: #0e5d4b;
  --button-utility-bg: #ffffff;
  --button-utility-border: #2457a6;
  --button-utility-text: #2457a6;
  --button-utility-hover-bg: #e8f0fe;
  --button-utility-hover-border: #1d4b91;
  --button-disabled-bg: #f0f3ef;
  --button-disabled-border: #e1e6df;
  --button-disabled-text: #9aa39c;
  --warn: #d8a31c;
  --blue: #2457a6;
  --soft: #e9f3ef;
  --state-critical-bg: #fde8e8;
  --state-critical-text: #9b1c1c;
  --state-needs-attention-bg: #fff0c2;
  --state-needs-attention-text: #6d4a00;
  --state-needs-attention-border: #e2b13c;
  --state-needs-attention-panel-bg: #fff8e8;
  --state-stable-bg: #ffffff;
  --state-stable-text: #657168;
  --state-good-bg: #e8f0fe;
  --state-good-text: #2457a6;
  --state-excellent-bg: #e9f3ef;
  --state-excellent-text: #0e5d4b;
  --row-stripe: #fbfdfb;
  --row-hover: #f1f8f4;
  --surface-card-bg: #e6f3ec;
  --surface-card-bg-alt: #eef2e6;
  --surface-card-bg-selected: #dff0e9;
  --surface-card-bg-subtle: #eef8f4;
  --surface-card-bg-disabled: #eef5f1;
  --surface-card-border: #7dac8d;
  --surface-card-border-alt: #9bab82;
  --surface-card-border-strong: #8fb99e;
  --surface-card-hover-border: var(--accent-strong);
  --surface-card-border-disabled: #c6d5cb;
  --surface-card-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(21, 122, 98, 0.08));
  --surface-card-overlay-quiet: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(21, 122, 98, 0.08));
  --surface-card-overlay-selected: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(21, 122, 98, 0.12));
  --surface-card-overlay-disabled: linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(101, 113, 104, 0.08));
  --surface-card-pill-bg: rgba(255, 255, 255, 0.84);
  --surface-card-action-bg: rgba(255, 255, 255, 0.9);
  --wizard-choice-card-width: 478px;
  --wizard-choice-card-min-height: 250px;
  --wizard-choice-card-min-height-compact: 244px;
  --job-board-card-height: calc(
    (2 * var(--space-grid)) + var(--space-grid) + var(--space-title-copy) + (6 * var(--space-form))
  );
  --wizard-choice-card-padding: 28px;
  --wizard-choice-card-icon-size: 118px;
  --wizard-choice-card-icon-glyph-size: 108px;
  --wizard-choice-card-icon-size-compact: 70px;
  --wizard-choice-card-icon-glyph-size-compact: 74px;
  --wizard-choice-card-cue-size: 54px;
  --wizard-choice-card-base-icon-size: 84px;
  --wizard-trade-card-min-height: 150px;
  --wizard-trade-card-min-height-compact: 132px;
  --wizard-trade-card-visual-size: 68px;
  --wizard-category-mark-size: 64px;
  --wizard-trade-card-image-width: 190px;
  --wizard-trade-card-image-height: 108px;
  --wizard-price-item-min-width: 220px;
  --wizard-price-input-min-width: 135px;
  --wizard-price-unit-width: 200px;
  --wizard-price-field-width: 150px;
  --job-board-meta-width: var(--wizard-price-field-width);
  --service-catalogue-panel-gap: var(--space-field);
  --service-editor-panel-max-width: 760px;
  --profile-panel-max-width: 640px;
  --layout-shell-max-width: 1120px;
  --layout-public-shell-max-width: 920px;
  --layout-site-shell-max-width: 1180px;
  --layout-wide-shell-max-width: 1220px;
  --layout-schedule-max-width: 1600px;
  --layout-auth-shell-max-width: 480px;
  --job-board-compact-postcode-width: 5.25rem;
  --job-board-compact-status-width: 5.5rem;
  --layout-shell-gutter: 32px;
  --layout-shell-block-start: 32px;
  --layout-shell-block-end: 64px;
  --topbar-height: 64px;
  --topbar-gutter: 28px;
  --topbar-border: rgba(255, 255, 255, 0.12);
  --navigation-surface: rgba(12, 67, 56, 0.94);
  --navigation-pill-highlight-start: rgba(255, 255, 255, 0.22);
  --navigation-pill-highlight-end: rgba(255, 255, 255, 0.08);
  --navigation-pill-border: rgba(255, 255, 255, 0.12);
  --navigation-pill-inset-highlight: rgba(255, 255, 255, 0.08);
  --navigation-pill-shadow: rgba(0, 0, 0, 0.12);
  --navigation-menu-width: 348px;
  --navigation-menu-icon-size: 36px;
  --navigation-menu-border: rgba(190, 224, 225, 0.28);
  --navigation-menu-surface: linear-gradient(180deg, rgba(10, 38, 35, 0.64), rgba(28, 54, 47, 0.48));
  --navigation-menu-hover: rgba(255, 255, 255, 0.12);
  --navigation-menu-interactive-text: #ffb300;
  --navigation-menu-blur: 24px;
  --navigation-menu-saturation: 105%;
  --navigation-control-height: 32px;
  --navigation-control-inline-padding: 14px;
  --navigation-chevron-size: 7px;
  --navigation-icon-color: #ffffff;
  --onboarding-progress-card-min-height: 108px;
  --onboarding-progress-title-height: 2.4em;
  --media-card-inset: 12px;
  --media-card-radius: 8px;
  --media-card-visual-height: 128px;
  --radius-panel: 8px;
  --radius-control: 8px;
  --radius-media: 6px;
  --radius-pill: 999px;
  --radius-icon-detail: 3px;
  --size-control-min-height: 40px;
  --size-field-min-height: 44px;
  --size-compact-control: 36px;
  --size-touch-target: 44px;
  --size-icon-button: 48px;
  --size-print-icon: 22px;
  --size-action-icon: 20px;
  --size-action-button: 32px;
  --size-action-button-small: 18px;
  --size-action-button-medium: 24px;
  --size-checkbox-control: 1.5rem;
  --size-form-action-width: 260px;
  --size-portal-search-type: 176px;
  --size-portal-search-control: 42px;
  --size-portal-search-submit-width: 38px;
  --size-portal-search-submit-height: 34px;
  --offset-card-status-title-align: -6px;
  --size-dialog-max-width: 340px;
  --size-popover-max-width: 520px;
  --size-popover-max-height: 80vh;
  --size-content-index-image: 56px;
  --size-content-index-image-compact: 44px;
  --shadow-popover: 0 20px 50px rgb(17 31 26 / 18%);
  --shadow-dialog: 0 18px 60px rgba(23, 32, 27, 0.18);
  --shadow-elevated-card: 0 2px 10px rgb(0 0 0 / 25%), 0 4px 4px rgb(0 0 0 / 32%);
  --overlay-backdrop: rgba(23, 32, 27, 0.35);
  --overlay-help-backdrop: rgb(17 31 26 / 35%);
  --hero-panel-bg: linear-gradient(135deg, #eaf6f1, #f8fbf4 62%, var(--panel));
  --hero-panel-min-height: 260px;
  --hero-panel-min-height-compact: 180px;
  --focus-ring-inner: inset 0 0 0 1px var(--accent);
  --focus-ring-color: var(--accent-strong);
  --focus-ring-navigation-color: var(--marketing-nav-active);
  --surface-card-panel-bg: rgba(255, 255, 255, 0.86);
  --surface-card-panel-border: rgba(143, 185, 158, 0.7);
  --surface-card-divider: rgba(143, 185, 158, 0.36);
  --surface-card-heading-divider: rgba(143, 185, 158, 0.5);
  --font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.78rem;
  --text-sm: 0.86rem;
  --text-small: var(--text-sm);
  --text-label: 0.9rem;
  --text-card: 0.94rem;
  --text-body: 1rem;
  --text-lede: 1.12rem;
  --text-h1: 1.7rem;
  --text-h2: 1.1rem;
  --text-h3: var(--text-h2);
  --text-page-title: 2.2rem;
  --text-document-title: 1.9rem;
  --text-hero-title: 3.25rem;
  --text-title: 4.4rem;
  --text-stat: 1.8rem;
  --text-total: 1.25rem;
  /* Semantic typography roles used by operational screens and quote documents. */
  --text-section-title: var(--text-h2);
  --text-content-label: var(--text-label);
  --text-content-value: var(--text-content-label);
  --text-supporting-copy: var(--text-sm);
  --text-quote-section-title: var(--text-content-label);
  --text-quote-copy: var(--text-content-label);
  --line-tight: 1;
  --line-heading: 1.08;
  --line-card: 1.35;
  --line-body: 1.55;
  --line-list: 1.8;
  --line-quote: 1.55;
  --line-quote-contact: 1.3;
  --quote-col-quantity-width: 7.5rem;
  --quote-col-unit-width: 1.25rem;
  --quote-col-price-width: 6.75rem;
  --quote-col-vat-rate-width: 5.75rem;
  --quote-col-amount-width: 6.75rem;
  --quote-summary-table-min-width: 32rem;
  --invoice-comparison-quantity-width: 4.5rem;
  --invoice-comparison-price-width: 5.5rem;
  --invoice-comparison-vat-width: 5rem;
  --invoice-comparison-amount-width: 5.75rem;
  --invoice-comparison-table-min-width: 36.5rem;
  --document-preview-sheet-width: 794px;
  --document-preview-content-width: calc(var(--document-preview-sheet-width) - (var(--space-form) * 2) - 2px);
  --weight-body: 400;
  --weight-strong: 700;
  --weight-heading: 800;
  --weight-content-value: var(--weight-body);
  --weight-content-label: var(--weight-strong);
  --space-field: 8px;
  --space-title-copy: var(--space-field);
  --space-quote-contact-line: 1px;
  --space-compact: 10px;
  --space-card-list: 9px;
  --space-action: 12px;
  --space-pill-y-compact: 0;
  --space-grid: 16px;
  --space-form: 22px;
  --space-form-group: 18px;
  --space-section: 24px;
  --space-content-section: var(--space-section);
  --space-panel: 32px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-field);
  left: var(--space-field);
  z-index: 100;
  min-height: var(--size-control-min-height);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control);
  padding: 0 var(--space-grid);
  background: var(--ink);
  color: var(--panel);
  font-weight: var(--weight-strong);
  transform: translateY(calc(-100% - var(--space-form)));
}

.skip-link:focus-visible {
  outline: 3px solid var(--focus-ring-navigation-color);
  outline-offset: 3px;
  transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}

.topbar :where(a, button):focus-visible {
  outline-color: var(--focus-ring-navigation-color);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
  color: var(--ink);
  background: var(--page);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--topbar-height);
  padding-right: calc(var(--topbar-gutter) + env(safe-area-inset-right));
  padding-left: calc(var(--topbar-gutter) + env(safe-area-inset-left));
  border-bottom: 1px solid var(--topbar-border);
  background: var(--marketing-nav-bg);
  color: var(--marketing-nav-link);
}

.brand {
  font-size: 2rem;
  font-weight: var(--weight-heading);
  line-height: var(--line-tight);
  color: var(--marketing-nav-link);
}

.marketing-topbar {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}

.marketing-topbar .brand {
  justify-self: start;
}

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

.marketing-nav {
  display: contents;
}

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

.marketing-nav-links {
  grid-column: 2;
  justify-self: center;
}

.marketing-nav-actions {
  grid-column: 3;
  justify-self: end;
}

.topbar nav a:not(.button):not(.icon-button) {
  min-height: auto;
  border-color: transparent;
  padding: 0 12px;
  background: transparent;
  color: color-mix(in srgb, var(--marketing-nav-link) 78%, transparent);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
}

.topbar nav a:not(.button):not(.icon-button).active,
.topbar nav a:not(.button):not(.icon-button):hover,
.topbar nav a:not(.button):not(.icon-button):focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--marketing-nav-active);
}

.topbar .icon-button,
.topbar .nav-form button {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

.topbar .icon-button:hover,
.topbar .icon-button:focus-visible,
.topbar .nav-form button:hover,
.topbar .nav-form button:focus-visible {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--ink);
}

.frosted-navigation-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  overflow: visible;
}

.frosted-navigation-topbar .brand {
  grid-column: 1;
  justify-self: start;
}

.app-navigation {
  --app-navigation-background: var(--navigation-surface);
  --app-navigation-gradient-start: var(--navigation-pill-highlight-start);
  --app-navigation-gradient-end: var(--navigation-pill-highlight-end);
  --app-navigation-pill-background: linear-gradient(
    to bottom,
    var(--app-navigation-gradient-start) 0%,
    color-mix(in srgb, var(--app-navigation-gradient-start) 52%, var(--app-navigation-gradient-end)) 48%,
    var(--app-navigation-gradient-end) 100%
  );
  display: contents;
  min-width: 0;
  color: var(--marketing-nav-link);
}

.app-navigation-list {
  grid-column: 2;
  justify-self: center;
}

.app-navigation-list,
.app-navigation-menu ul {
  display: flex;
  align-items: center;
  gap: var(--space-field);
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-navigation-item {
  position: relative;
}

.app-navigation-menu-bridge {
  position: absolute;
  top: 100%;
  right: auto;
  left: calc(
    var(--navigation-control-inline-padding) - var(--space-grid) - var(--navigation-menu-icon-size) -
      var(--space-action)
  );
  z-index: 29;
  width: min(var(--navigation-menu-width), calc(100vw - (2 * var(--topbar-gutter))));
  height: var(--space-compact);
  pointer-events: none;
}

.app-navigation-has-menu.is-open .app-navigation-menu-bridge {
  pointer-events: auto;
}

.app-navigation-control-group {
  display: flex;
  align-items: center;
  min-height: var(--navigation-control-height);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.app-navigation .app-navigation-control,
.app-navigation .app-navigation-direct-link {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--size-control-min-height);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-action);
  background: transparent;
  color: var(--navigation-icon-color);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

.topbar nav.app-navigation a.app-navigation-control,
.topbar nav.app-navigation a.app-navigation-direct-link,
.topbar nav.app-navigation button.app-navigation-control {
  min-height: var(--navigation-control-height);
  padding-inline: var(--navigation-control-inline-padding);
  color: var(--navigation-icon-color);
}

.app-navigation .app-navigation-control:hover,
.app-navigation .app-navigation-control:focus-visible,
.app-navigation .app-navigation-control.is-primary,
.app-navigation .app-navigation-direct-link:hover,
.app-navigation .app-navigation-direct-link:focus-visible,
.app-navigation-item.is-active > .app-navigation-control,
.app-navigation-item.is-active .app-navigation-control-group,
.app-navigation-item.is-open > .app-navigation-control,
.app-navigation-item.is-open .app-navigation-control-group {
  border-color: var(--navigation-pill-border);
  background: var(--app-navigation-pill-background);
  box-shadow:
    inset 0 1px 0 var(--navigation-pill-inset-highlight),
    0 6px 18px var(--navigation-pill-shadow);
  color: var(--marketing-nav-link);
}

.topbar nav.app-navigation a.app-navigation-control.is-primary {
  color: var(--marketing-nav-active);
}

.topbar nav.app-navigation a.app-navigation-control.is-primary:hover,
.topbar nav.app-navigation a.app-navigation-control.is-primary:focus-visible {
  color: var(--marketing-nav-link);
}

.app-navigation-item.is-active > .app-navigation-control,
.app-navigation-item.is-open > .app-navigation-control,
.app-navigation-item.is-open > .app-navigation-control {
  min-height: var(--navigation-control-height);
  padding-inline: var(--navigation-control-inline-padding);
}

.topbar nav.app-navigation .app-navigation-control-group > .app-navigation-direct-link,
.topbar nav.app-navigation .app-navigation-control-group > .app-navigation-control,
.topbar nav.app-navigation .app-navigation-control-group > .app-navigation-direct-link:hover,
.topbar nav.app-navigation .app-navigation-control-group > .app-navigation-direct-link:focus-visible,
.topbar nav.app-navigation .app-navigation-control-group > .app-navigation-control:hover,
.topbar nav.app-navigation .app-navigation-control-group > .app-navigation-control:focus-visible {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-navigation-chevron {
  display: inline-block;
  width: var(--navigation-chevron-size);
  height: var(--navigation-chevron-size);
  margin-left: var(--space-field);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.app-navigation-item.is-open .app-navigation-chevron {
  transform: translateY(2px) rotate(225deg);
}

.app-navigation-logout {
  display: flex;
  align-items: center;
  gap: var(--space-field);
  grid-column: 3;
  justify-self: end;
  margin: 0;
}

.app-navigation-menu {
  position: absolute;
  top: calc(100% + var(--space-compact));
  right: auto;
  left: calc(
    var(--navigation-control-inline-padding) - var(--space-grid) - var(--navigation-menu-icon-size) -
      var(--space-action)
  );
  z-index: 30;
  width: min(var(--navigation-menu-width), calc(100vw - (2 * var(--topbar-gutter))));
  overflow: hidden;
  border: 1px solid var(--navigation-menu-border);
  border-radius: var(--radius-panel);
  background: var(--navigation-menu-surface);
  box-shadow: var(--shadow-popover);
  backdrop-filter: blur(var(--navigation-menu-blur)) saturate(var(--navigation-menu-saturation));
  -webkit-backdrop-filter: blur(var(--navigation-menu-blur)) saturate(var(--navigation-menu-saturation));
}

.app-navigation-menu[hidden] {
  display: none;
}

.app-navigation-menu ul {
  display: block;
}

.topbar nav.app-navigation a.app-navigation-menu-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-action);
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: var(--space-field) var(--space-grid);
  background: transparent;
  color: var(--marketing-nav-link);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
  letter-spacing: normal;
  text-align: left;
}

.topbar nav.app-navigation button.app-navigation-menu-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-action);
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: var(--space-field) var(--space-grid);
  background: transparent;
  color: var(--marketing-nav-link);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
  letter-spacing: normal;
  text-align: left;
}

.topbar nav.app-navigation a.app-navigation-menu-link:hover,
.topbar nav.app-navigation a.app-navigation-menu-link:focus-visible,
.topbar nav.app-navigation a.app-navigation-menu-link:active,
.topbar nav.app-navigation button.app-navigation-menu-link:hover,
.topbar nav.app-navigation button.app-navigation-menu-link:focus-visible,
.topbar nav.app-navigation button.app-navigation-menu-link:active {
  background: var(--navigation-menu-hover);
}

.topbar nav.app-navigation a.app-navigation-menu-link:hover .app-navigation-menu-title,
.topbar nav.app-navigation a.app-navigation-menu-link:focus-visible .app-navigation-menu-title,
.topbar nav.app-navigation a.app-navigation-menu-link:active .app-navigation-menu-title,
.topbar nav.app-navigation button.app-navigation-menu-link:hover .app-navigation-menu-title,
.topbar nav.app-navigation button.app-navigation-menu-link:focus-visible .app-navigation-menu-title,
.topbar nav.app-navigation button.app-navigation-menu-link:active .app-navigation-menu-title {
  color: var(--navigation-menu-interactive-text);
}

.app-navigation-menu-image {
  display: block;
  width: var(--navigation-menu-icon-size);
  height: var(--navigation-menu-icon-size);
  align-self: start;
  background: var(--app-navigation-icon-color, var(--navigation-icon-color));
  mask-image: var(--app-navigation-menu-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--app-navigation-menu-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.app-navigation-menu-copy {
  min-width: 0;
}

.app-navigation-menu-title,
.app-navigation-menu-detail {
  display: block;
  overflow: hidden;
}

.app-navigation-menu-title {
  font-size: inherit;
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-navigation-menu-detail {
  display: -webkit-box;
  margin-top: 2px;
  color: color-mix(in srgb, var(--marketing-nav-link) 70%, transparent);
  font-size: var(--text-small);
  font-weight: var(--weight-normal);
  line-height: var(--line-heading);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-field);
  width: 100%;
  height: auto;
  min-height: var(--topbar-height);
  padding-block: var(--space-field);
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact] .brand {
  grid-column: 1;
  grid-row: 1;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation {
  display: contents;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation-list {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation-logout {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  flex: 0 0 auto;
  margin: 0;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact]
  .app-navigation[data-app-navigation-right-layout="down"]
  .app-navigation-logout {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: end;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact]
  .app-navigation[data-app-navigation-right-layout="compress"] {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: center;
  gap: clamp(var(--space-compact), 3vw, var(--space-action));
  width: 100%;
  min-width: 0;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact]
  .app-navigation[data-app-navigation-right-layout="compress"]
  .app-navigation-list {
  display: flex;
  flex: 1 1 auto;
  grid-column: auto;
  grid-row: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: clamp(var(--space-compact), 3vw, var(--space-field));
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact]
  .app-navigation[data-app-navigation-right-layout="compress"]
  .app-navigation-logout {
  grid-column: auto;
  grid-row: auto;
  gap: clamp(var(--space-compact), 3vw, var(--space-field));
  margin-left: auto;
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation-menu {
  width: min(var(--navigation-menu-width), calc(100vw - (2 * var(--space-grid))));
}

.topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation-menu-bridge {
  display: none;
}

nav a,
.nav-form button,
.button,
.button-like,
button {
  min-height: var(--size-control-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
  padding: 0 14px;
  font: inherit;
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
  background: var(--panel);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}

.button-like {
  width: fit-content;
  list-style: none;
}

.button-like::-webkit-details-marker {
  display: none;
}

.icon-button {
  width: var(--size-icon-button);
  padding: 0;
}

.is-loading {
  pointer-events: none;
  cursor: wait;
}

button.is-loading,
.button.is-loading,
.button-like.is-loading {
  gap: 8px;
}

.icon-button.is-loading,
.circle-icon-button.is-loading,
.label-action-button.is-loading,
.remove-icon-button.is-loading,
.mini-icon-button.is-loading {
  gap: 0;
}

.button-loading-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: button-loading-spin 700ms linear infinite;
}

.circle-icon-button.is-loading::before,
.circle-icon-button.is-loading::after,
.remove-icon-button.is-loading .remove-bin-icon {
  display: none;
}

@keyframes button-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.print-icon {
  width: var(--size-print-icon);
  height: var(--size-print-icon);
  color: currentColor;
  display: block;
  fill: currentColor;
}

.nav-form {
  margin: 0;
}

.nav-form button {
  background: transparent;
}

.topbar .nav-form button {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

nav a.active,
nav a:hover,
nav a:focus-visible,
.nav-form button:focus-visible,
.button:hover,
.button-like:hover,
button:hover {
  border-color: var(--accent);
}

.button-primary,
.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--button-pressed-text);
}

.button-primary:hover,
.button-primary:focus-visible,
.primary:hover,
.primary:focus-visible {
  border-color: var(--button-primary-hover-border);
  background: var(--button-primary-hover-bg);
  color: var(--button-pressed-text);
}

.button-secondary,
.secondary {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.button-secondary:hover,
.button-secondary:focus-visible,
.secondary:hover,
.secondary:focus-visible {
  border-color: var(--button-secondary-hover-border);
  background: var(--button-secondary-hover-bg);
  color: var(--accent-strong);
}

.button-neutral {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel);
}

.button-neutral:hover,
.button-neutral:focus-visible {
  border-color: var(--state-stable-text);
  color: var(--ink);
}

.button-utility {
  border-color: var(--button-utility-border);
  color: var(--button-utility-text);
  background: var(--button-utility-bg);
}

.button-utility:hover,
.button-utility:focus-visible {
  border-color: var(--button-utility-hover-border);
  background: var(--button-utility-hover-bg);
  color: var(--button-utility-text);
}

.button-danger {
  border-color: var(--state-critical-text);
  color: var(--state-critical-text);
  background: var(--panel);
}

.button-danger:hover,
.button-danger:focus-visible {
  border-color: var(--state-critical-text);
  background: var(--state-critical-bg);
}

nav a:active,
.nav-form button:active,
.button:active,
.button-like:active,
button:active {
  border-color: var(--button-pressed-border);
  background: var(--button-pressed-bg);
  color: var(--button-pressed-text);
  transform: translateY(1px);
}

.button-primary:active,
.primary:active {
  border-color: var(--accent);
  background: var(--button-primary-pressed-bg);
  color: var(--button-primary-pressed-text);
}

.button-neutral:active {
  border-color: var(--state-stable-text);
  background: var(--state-stable-bg);
  color: var(--ink);
}

.button-utility:active {
  border-color: var(--button-utility-hover-border);
  background: var(--state-good-text);
  color: var(--button-pressed-text);
}

.button-danger:active {
  border-color: var(--state-critical-text);
  background: var(--state-critical-text);
  color: var(--button-pressed-text);
}

.label-with-actions {
  --label-with-actions-color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-compact);
  color: var(--label-with-actions-color);
}

.label-with-actions-title {
  color: var(--label-with-actions-color);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.label-with-actions-buttons {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-action) / 3);
}

.label-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-action-button);
  min-width: var(--size-action-button);
  height: var(--size-action-button);
  min-height: var(--size-action-button);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 0;
  background: transparent;
  color: inherit;
}

.label-action-button:hover,
.label-action-button:focus-visible {
  border-color: var(--line);
  background: var(--row-hover);
  color: inherit;
}

.label-action-button:active {
  border-color: var(--accent);
  background: var(--button-secondary-hover-bg);
  color: inherit;
}

.label-action-button-accent:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, :active) {
  color: var(--accent);
}

.label-action-button-accent {
  color: var(--muted);
}

.label-action-button-accent .label-action-icon-tinted {
  margin: 0;
  color: inherit;
  background-color: currentColor;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

.label-action-button-size-small {
  width: var(--size-action-button-small);
  min-width: var(--size-action-button-small);
  height: var(--size-action-button-small);
  min-height: var(--size-action-button-small);
}

.label-action-button-size-medium {
  width: var(--size-action-button-medium);
  min-width: var(--size-action-button-medium);
  height: var(--size-action-button-medium);
  min-height: var(--size-action-button-medium);
}

.label-action-button-size-large {
  width: var(--size-action-button);
  min-width: var(--size-action-button);
  height: var(--size-action-button);
  min-height: var(--size-action-button);
}

.label-action-button-help {
  border-color: var(--state-good-text);
  border-radius: var(--radius-pill);
  color: var(--state-good-text);
}

.icon-control-circle {
  border-radius: var(--radius-pill);
}

.label-action-button-help.icon-control-circle {
  border-color: transparent;
}

.label-action-button-help.icon-control-circle .label-action-icon-text {
  width: var(--size-action-button-small);
  height: var(--size-action-button-small);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
}

.label-action-button-help:hover,
.label-action-button-help:focus-visible,
.label-action-button-help:active,
.label-action-button-help.icon-control-circle:is(:hover, :focus-visible, :active) {
  border-color: var(--line);
  background: var(--state-good-bg);
  color: var(--state-good-text);
}

.label-action-icon {
  display: block;
  width: var(--size-action-icon);
  height: var(--size-action-icon);
  object-fit: contain;
}

.label-action-icon-text {
  margin: 0;
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  justify-content: center;
  line-height: 1;
}

.help-popover {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-panel);
  background: var(--overlay-help-backdrop);
}

.help-popover[hidden] {
  display: none;
}

.help-popover-shell {
  position: relative;
  width: min(100%, var(--size-popover-max-width));
  max-height: var(--size-popover-max-height);
  border-radius: var(--radius-panel);
  padding: var(--space-action);
  background: var(--panel);
  box-shadow: var(--shadow-popover);
}

.help-popover-frame {
  display: flex;
  max-height: calc(var(--size-popover-max-height) - (2 * var(--space-action)));
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--space-action);
  background: var(--panel);
}

.help-popover-frame h2 {
  margin: 0;
  margin-right: calc(24px + var(--space-action));
}

.help-popover-content {
  margin: var(--space-form-group) 0 0;
  min-height: 0;
  overflow-y: auto;
  color: var(--muted);
}

.help-popover-content p {
  margin: 0;
}

.help-popover-list {
  display: grid;
  gap: var(--space-action);
  margin: 0;
  padding-left: var(--space-form);
}

.help-popover-list strong {
  color: var(--ink);
}

.help-popover-content > * + * {
  margin-top: var(--space-action);
}

.help-popover .help-popover-close {
  position: absolute;
  top: var(--space-action);
  right: var(--space-action);
  transform: translate(50%, -50%);
  z-index: 1;
}

button:disabled,
button:disabled:hover,
button:disabled:active {
  border-color: var(--button-disabled-border);
  background: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.app-shell,
.public-shell {
  width: min(var(--layout-shell-max-width), calc(100vw - var(--layout-shell-gutter)));
  margin: var(--layout-shell-block-start) auto var(--layout-shell-block-end);
}

.public-shell {
  width: min(var(--layout-public-shell-max-width), calc(100vw - var(--layout-shell-gutter)));
}

.site-shell {
  width: min(var(--layout-site-shell-max-width), calc(100vw - var(--layout-shell-gutter)));
  margin: var(--layout-shell-block-start) auto var(--layout-shell-block-end);
}

.site-hero {
  margin-bottom: 32px;
}

.site-copy h1 {
  max-width: 1120px;
  color: var(--ink);
  font-size: var(--text-hero-title);
  line-height: var(--line-heading);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.site-copy .lede {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
}

.site-hero-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
  margin-top: 34px;
}

.site-hero-actions {
  display: grid;
  justify-items: start;
}

.hero-proof-list {
  display: grid;
  gap: 10px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-proof-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--text-lede);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
}

.hero-proof-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid var(--state-good-text);
  border-radius: var(--radius-pill);
  background: var(--state-good-bg);
}

.site-copy .inline-actions {
  margin-top: 24px;
}

.site-hero-actions .inline-actions {
  justify-self: start;
}

.site-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}

.site-workflow div {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 18px;
  background: var(--panel);
}

.site-workflow span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--state-good-bg);
  color: var(--state-good-text);
  font-weight: var(--weight-heading);
}

.site-workflow strong {
  display: block;
  margin-top: 14px;
  color: var(--ink);
  font-size: var(--text-h2);
  line-height: var(--line-heading);
}

.site-workflow p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.site-workflow div:nth-child(2) span,
.site-workflow div:nth-child(4) span {
  background: var(--state-excellent-bg);
  color: var(--accent-strong);
}

.product-story {
  margin: 0 0 32px;
}

.product-story-header {
  margin-bottom: 16px;
}

.product-story-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-h1);
  line-height: var(--line-heading);
}

.product-story-header p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.product-story-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.product-story-slide {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: stretch;
  padding: 24px;
}

.product-story-slide-quote {
  grid-template-columns: minmax(240px, 0.45fr) minmax(420px, 1fr);
}

.product-story-slide:first-child {
  grid-template-columns: minmax(240px, 0.45fr) minmax(420px, 1fr);
}

.product-story-slide[hidden] {
  display: none;
}

.product-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-story-copy span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--state-good-bg);
  color: var(--state-good-text);
  font-weight: var(--weight-heading);
}

.product-story-copy h3 {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: var(--text-h1);
  line-height: var(--line-heading);
}

.product-story-copy p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.story-mock {
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
}

.story-mock-row,
.story-mock-table div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.story-mock-row span,
.story-mock-table span {
  color: var(--muted);
  font-weight: var(--weight-strong);
  text-align: right;
}

.story-status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--state-excellent-bg);
  color: var(--state-excellent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  line-height: 1;
  text-align: center;
}

.story-status-pill-good {
  background: var(--state-good-bg);
  color: var(--state-good-text);
}

.story-status-pill-attention {
  background: var(--state-needs-attention-bg);
  color: var(--state-needs-attention-text);
}

.story-mock-panel {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--soft);
}

.story-mock-panel span {
  color: var(--muted);
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
}

.story-mock-panel strong {
  color: var(--ink);
  font-size: var(--text-h2);
  line-height: var(--line-heading);
}

.story-mock-list,
.story-mock-table {
  display: grid;
  gap: 0;
}

.story-mock-list div,
.story-mock-table div {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  color: var(--ink);
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
}

.story-mock-list div:last-child,
.story-mock-table div:last-child {
  border-bottom: 0;
}

.story-mock-brand {
  color: var(--accent-strong);
  font-size: var(--text-h1);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.story-history-preview {
  gap: 0;
  min-height: 360px;
  align-content: center;
}

.story-history-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  align-items: start;
}

.story-history-row:first-child {
  padding-top: 0;
}

.story-history-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.story-history-row strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.story-history-row p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
}

.story-mock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.story-mock-actions span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0 14px;
  background: var(--accent);
  color: #fff;
  font-weight: var(--weight-heading);
}

.story-mock-actions span:last-child {
  border-color: var(--line);
  background: var(--panel);
  color: var(--accent-strong);
}

.story-request-preview,
.story-screen-preview {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #f6f8f6;
}

.story-screen-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 14px 36px rgb(9 43 32 / 0.14);
}

.story-request-preview {
  min-height: 520px;
  max-height: 640px;
  overflow: auto;
  padding: 14px;
}

.story-request-preview img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  border-radius: 6px;
  box-shadow: 0 14px 36px rgb(9 43 32 / 0.14);
}

.story-quote-preview {
  display: flex;
  min-height: 520px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f6f8f6;
}

.story-quote-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 620px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.12);
  object-fit: contain;
}

.product-story-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.product-story-dots button {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  background: var(--panel);
}

.product-story-dots button[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.site-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.site-band p {
  color: var(--muted);
  line-height: var(--line-body);
}

.home-page {
  display: grid;
  gap: calc(var(--space-section) * 3);
  margin-top: var(--space-section);
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-grid);
  min-height: 570px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 3);
  padding: calc(var(--space-form) * 2);
  background: linear-gradient(135deg, var(--panel) 18%, var(--soft) 100%);
}

.home-hero-copy {
  position: relative;
  z-index: 1;
}

.home-eyebrow {
  margin: 0 0 var(--space-action);
  color: var(--accent-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  letter-spacing: 0.11em;
  line-height: var(--line-heading);
}

.home-hero h1 {
  max-width: 560px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(var(--text-hero-title), 4.4vw, var(--text-title));
  line-height: var(--line-heading);
}

.home-hero-lede {
  max-width: 540px;
  margin: var(--space-form) 0 0;
  color: var(--muted);
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-action);
  align-items: center;
  margin-top: calc(var(--space-form) * 1.5);
}

.home-hero-actions .button,
.home-final .button {
  min-height: var(--size-touch-target);
  padding-inline: var(--space-form);
}

.home-text-link {
  display: inline-flex;
  min-height: var(--size-touch-target);
  gap: var(--space-compact);
  align-items: center;
  color: var(--accent-strong);
  font-weight: var(--weight-heading);
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.home-text-link:hover,
.home-text-link:focus-visible {
  text-decoration-color: currentColor;
}

.home-hero-note {
  max-width: 430px;
  margin: var(--space-action) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.home-hero-visual {
  position: relative;
  min-height: 520px;
  min-width: 0;
}

.home-workflow-motion {
  overflow: hidden;
  min-height: 550px;
}

.home-runway-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: grab;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
}

.home-runway-viewport:focus-visible {
  box-shadow: 0 0 0 3px var(--marketing-nav-active);
}

.home-runway-viewport[data-dragging] {
  cursor: grabbing;
}

.home-runway-track {
  position: absolute;
  top: var(--space-action);
  bottom: calc(var(--space-action) + 32px);
  left: 0;
  display: flex;
  width: 100%;
  gap: var(--space-action);
  will-change: transform;
}

.home-runway-scene {
  display: grid;
  flex: 0 0 86%;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 1.2);
  margin: 0;
  background: linear-gradient(145deg, var(--soft), var(--surface-card-bg));
  box-shadow:
    0 2px 5px rgb(23 50 42 / 7%),
    0 8px 20px rgb(23 50 42 / 10%);
  opacity: var(--home-runway-scene-opacity, 0.46);
  transform: translateY(var(--home-runway-scene-lift, 8px)) scale(var(--home-runway-scene-scale, 0.94));
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
  will-change: transform, opacity;
}

.home-runway-scene.is-active {
  z-index: 2;
  border-color: color-mix(in srgb, var(--accent) 74%, var(--line));
  box-shadow:
    0 3px 7px rgb(23 50 42 / 8%),
    0 12px 28px rgb(23 50 42 / 12%);
}

.home-runway-screen {
  position: relative;
  display: grid;
  container-type: size;
  height: auto;
  min-height: 0;
  max-height: 100%;
  overflow: visible;
  align-self: stretch;
  place-items: center;
  margin: var(--space-compact) var(--space-compact) 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.home-runway-screen img {
  display: block;
  -webkit-user-drag: none;
  width: min(100cqw, calc(100cqh * var(--home-runway-media-ratio)));
  height: auto;
  min-height: 0;
  max-width: none;
  max-height: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  aspect-ratio: var(--home-runway-media-ratio);
  object-fit: contain;
  object-position: center;
  background: var(--panel);
  pointer-events: none;
  user-select: none;
}

.home-runway-screen-portrait img {
  object-fit: contain;
  object-position: center;
}

.home-scheduling-composite {
  position: relative;
  width: min(100cqw, calc(100cqh * 1.4));
  aspect-ratio: 1.4;
}

.home-runway-scheduling .home-scheduling-calendar {
  position: absolute;
  top: 0;
  width: 100%;
  aspect-ratio: 2496 / 1128;
  box-shadow: 0 2px 5px rgb(23 50 42 / 7%);
}

.home-runway-scheduling .home-scheduling-booking {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 1120 / 607;
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgb(23 50 42 / 10%);
}

@media (max-width: 720px) {
  .home-scheduling-composite {
    display: grid;
    gap: var(--space-compact);
    width: min(100cqw, calc(100cqh * 1.2));
    aspect-ratio: auto;
  }

  .home-runway-scheduling .home-scheduling-booking {
    position: static;
    justify-self: end;
    width: 64%;
  }

  .home-runway-scheduling .home-scheduling-calendar {
    position: static;
  }
}

.home-runway-scene figcaption {
  display: grid;
  min-height: 106px;
  gap: 5px;
  align-content: center;
  padding: var(--space-action);
  color: var(--ink);
  background: transparent;
}

.home-runway-scene figcaption strong {
  color: var(--accent-strong);
  font-size: clamp(var(--text-lede), 2.3vw, var(--text-h1));
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.home-runway-scene figcaption span {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}

.home-runway-trade-screen {
  container-type: normal;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 10px;
  align-content: center;
  background: transparent;
}

.home-runway-trade-screen img {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 6px 7px rgb(23 50 42 / 14%));
}

.home-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid);
  border-block: 1px solid var(--line);
  padding-block: var(--space-form);
}

.home-outcomes p {
  margin: 0;
  color: var(--accent-strong);
  font-size: var(--text-lede);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  text-align: center;
}

.home-outcomes p + p {
  border-left: 1px solid var(--line);
}

.home-section-heading,
.home-detail-heading {
  max-width: 660px;
  margin-bottom: calc(var(--space-form) * 1.5);
}

.home-section-heading h2,
.home-detail-heading h2,
.home-final h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(var(--text-h1), 3vw, var(--text-page-title));
  line-height: var(--line-heading);
}

.home-section-heading > p:last-child,
.home-detail-heading > p:last-child,
.home-final p {
  margin: var(--space-action) 0 0;
  color: var(--muted);
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.home-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid);
}

.home-flow-card {
  display: grid;
  grid-template-rows: auto 230px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 2);
  background: var(--panel);
}

.home-flow-card-finance {
  grid-template-rows: auto clamp(270px, 30vw, 360px);
}

.home-flow-card-copy {
  min-height: 190px;
  padding: var(--space-form);
}

.home-flow-card h3,
.home-detail-grid h3 {
  margin: var(--space-action) 0 0;
  color: var(--ink);
  font-size: var(--text-h1);
  line-height: var(--line-heading);
}

.home-flow-card h3 {
  margin-top: 0;
}

.home-flow-card p,
.home-detail-grid p {
  margin: var(--space-action) 0 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.home-flow-media {
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: var(--space-action);
  background: var(--soft);
}

.home-feature-media-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  margin-inline: auto;
  background: var(--panel);
}

.home-flow-media-document .home-feature-media-frame {
  width: 80%;
}

.home-flow-media-inset {
  padding: var(--space-form);
}

.home-flow-media-inset .home-feature-media-frame {
  width: 88%;
}

.home-feature-media-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  transform: translate3d(0, var(--home-feature-media-offset, 0), 0);
  user-select: none;
  will-change: transform;
}

.home-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: calc(var(--space-form) * 2);
  border-radius: calc(var(--radius-panel) * 3);
  padding: calc(var(--space-form) * 2);
  background: var(--soft);
}

.home-detail-heading {
  margin: 0;
}

.home-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid);
}

.home-detail-grid > div {
  border-top: 1px solid var(--surface-card-border-strong);
  padding-top: var(--space-action);
}

.home-detail-grid h3 {
  margin-top: 0;
  font-size: var(--text-h2);
}

.home-final {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-grid);
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 2);
  padding: calc(var(--space-form) * 2);
  background: var(--panel);
}

.trade-index-hero {
  display: grid;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 3);
  padding: calc(var(--space-section) * 2) var(--space-form);
  background: linear-gradient(135deg, var(--panel) 18%, var(--soft) 100%);
  text-align: center;
}

.trade-index-hero h1 {
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(var(--text-hero-title), 5vw, var(--text-title));
  line-height: var(--line-heading);
}

.trade-index-hero > p:not(.home-eyebrow) {
  max-width: 720px;
  margin: var(--space-form) 0 0;
  color: var(--muted);
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.trade-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid);
}

.trade-directory-card {
  position: relative;
  min-width: 0;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 2);
  background: var(--surface-card-bg-subtle);
}

.trade-directory-card-link {
  display: grid;
  height: 100%;
  min-height: inherit;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 42%);
  grid-template-rows: auto 1fr;
  color: inherit;
  text-decoration: none;
}

.trade-directory-card-link:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: -4px;
}

.trade-directory-card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-form) 0 var(--space-form) var(--space-form);
}

.trade-directory-card h3,
.trade-benefit-grid h3,
.trade-workflow-step h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-h2);
  line-height: var(--line-heading);
}

.trade-directory-card p,
.trade-benefit-grid p,
.trade-workflow-step p {
  margin: var(--space-action) 0 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.trade-directory-card .home-text-link {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  align-self: flex-start;
  margin-top: auto;
  padding: var(--space-action) 0 var(--space-form) var(--space-form);
}

.trade-directory-card-visual {
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / -1;
  align-items: flex-end;
  align-self: stretch;
  justify-content: flex-end;
  padding: var(--space-action) var(--space-action) 0 0;
}

.trade-directory-card-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

.trade-directory-card:hover,
.trade-directory-card:focus-within {
  border-color: var(--surface-card-hover-border);
}

.trade-directory-card-summary .trade-directory-card-link {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(120px, 1fr) auto;
}

.trade-directory-card-summary .trade-directory-card-copy {
  grid-column: 1;
  grid-row: 1;
  padding: var(--space-form) var(--space-form) 0;
}

.trade-directory-card-summary .trade-directory-card-visual {
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  padding: var(--space-compact) var(--space-form);
}

.trade-directory-card-summary .trade-directory-card-visual img {
  width: min(100%, 230px);
  height: 100%;
  object-position: center;
}

.trade-directory-card-summary.trade-directory-card-custom {
  border-style: dashed;
}

.trade-directory-card-summary .home-text-link {
  grid-column: 1;
  grid-row: 3;
  padding: 0 var(--space-form) var(--space-form);
}

.trade-directory-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-action);
}

.trade-directory-card-link .trade-directory-card-arrow {
  align-self: center;
  padding-right: var(--space-action);
  color: var(--accent-strong);
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
}

.trade-directory-link-grid .trade-directory-card-arrow {
  grid-column: 3;
  grid-row: 1;
}

.trade-directory-link-grid .trade-directory-card {
  min-height: 104px;
  border-radius: var(--radius-panel);
}

.trade-directory-link-grid .trade-directory-card-link {
  grid-template-columns: minmax(88px, 26%) minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
}

.trade-directory-link-grid .trade-directory-card-copy {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  padding: var(--space-action) var(--space-compact);
}

.trade-directory-link-grid .trade-directory-card h3 {
  color: var(--accent-strong);
  font-size: var(--text-body);
}

.trade-directory-link-grid .trade-directory-card-visual {
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  padding: var(--space-compact);
}

.trade-directory-link-grid .trade-directory-card-visual img {
  width: min(100%, 112px);
  max-height: 88px;
  object-position: center;
}

.trade-hero h1 {
  font-size: clamp(var(--text-hero-title), 4vw, var(--text-title));
}

.trade-hero-workflow {
  position: absolute;
  top: 0;
  right: -58px;
  width: 108%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 1.5);
  background: var(--panel);
  box-shadow: var(--shadow-dialog);
}

.trade-hero-workflow img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .trade-hero .home-hero-visual {
    min-height: 0;
    aspect-ratio: 720 / 1600;
  }

  .trade-hero-workflow {
    right: 0;
    width: 100%;
  }
}

.trade-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid);
}

.trade-benefits .home-section-heading {
  max-width: none;
}

.trade-benefit-grid article {
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  padding: var(--space-form);
  background: var(--soft);
}

.trade-workflow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: calc(var(--space-form) * 2);
  border-radius: calc(var(--radius-panel) * 3);
  padding: calc(var(--space-form) * 2);
  background: var(--soft);
}

.trade-workflow .home-section-heading {
  margin: 0;
}

.trade-workflow-grid {
  display: grid;
  gap: var(--space-action);
}

.trade-workflow-step {
  display: grid;
  grid-template-columns: var(--size-touch-target) minmax(0, 1fr);
  gap: var(--space-action);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-action);
}

.trade-workflow-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.trade-workflow-step > span {
  display: inline-flex;
  width: var(--size-touch-target);
  height: var(--size-touch-target);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--panel);
  background: var(--accent);
  font-weight: var(--weight-heading);
}

.trade-workflow-step h3 {
  font-size: var(--text-body);
}

.trade-workflow-step p {
  margin-top: var(--space-compact);
}

.trade-examples {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: calc(var(--space-form) * 2);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 3);
  padding: calc(var(--space-form) * 2);
  background: var(--panel);
}

.trade-examples h2,
.trade-faq h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(var(--text-h1), 3vw, var(--text-page-title));
  line-height: var(--line-heading);
}

.trade-examples p:not(.home-eyebrow) {
  margin: var(--space-action) 0 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.trade-examples .trade-example-list {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-action);
  color: var(--ink);
  font-weight: var(--weight-heading);
}

.trade-example-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-panel) * 1.5);
  padding: var(--space-action);
  background: var(--soft);
}

.trade-example-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
}

.trade-faq-list {
  display: grid;
  max-width: 920px;
  gap: var(--space-action);
}

.trade-faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--space-action) var(--space-form);
  background: var(--panel);
}

.trade-faq-list summary {
  min-height: var(--size-touch-target);
  color: var(--ink);
  font-weight: var(--weight-heading);
  cursor: pointer;
}

.trade-faq-list p {
  margin: var(--space-action) 0 0;
  color: var(--muted);
  line-height: var(--line-body);
}

.trade-directory-compact .trade-directory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trade-directory-compact .trade-directory-card {
  min-height: 240px;
}

.trade-directory-compact .trade-directory-card-link {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(108px, 1fr) auto;
}

.trade-directory-compact .trade-directory-card-copy {
  grid-column: 1;
  grid-row: 1;
  padding: var(--space-form) var(--space-form) 0;
}

.trade-directory-compact .trade-directory-card .home-text-link {
  grid-column: 1;
  grid-row: 3;
  font-size: var(--text-sm);
  padding: 0 var(--space-form) var(--space-form);
  white-space: nowrap;
}

.trade-directory-compact .trade-directory-card-visual {
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  padding: var(--space-compact) var(--space-action);
}

.trade-directory-compact .trade-directory-card-visual img {
  width: min(100%, 210px);
  height: 100%;
  object-position: center;
}

@media (max-width: 860px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: var(--space-form);
  }

  .home-hero-visual {
    min-height: 520px;
  }

  .home-detail {
    grid-template-columns: 1fr;
  }

  .trade-directory-grid,
  .trade-directory-compact .trade-directory-grid,
  .trade-directory-link-grid,
  .trade-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trade-workflow,
  .trade-examples {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .home-page {
    gap: calc(var(--space-section) * 2);
    margin-top: 0;
  }

  .home-hero {
    gap: var(--space-form);
    border-radius: calc(var(--radius-panel) * 2);
  }

  .home-hero h1 {
    font-size: clamp(var(--text-page-title), 10vw, var(--text-hero-title));
  }

  .home-hero-visual {
    min-height: 500px;
  }

  .home-workflow-motion {
    min-height: 500px;
  }

  .home-runway-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
  }

  .home-runway-track {
    top: var(--space-compact);
    bottom: calc(var(--space-compact) + 28px);
    gap: var(--space-compact);
  }

  .home-runway-scene {
    flex-basis: 92%;
  }

  .home-runway-scene figcaption {
    min-height: 118px;
    padding: var(--space-action);
  }

  .home-runway-scene figcaption strong {
    font-size: var(--text-lede);
  }

  .home-runway-scene figcaption span {
    font-size: var(--text-xs);
  }

  .trade-hero .home-hero-visual {
    min-height: 250px;
  }

  .trade-hero-workflow {
    right: 0;
    width: 100%;
  }

  .home-outcomes,
  .home-flow-grid,
  .home-detail-grid {
    grid-template-columns: 1fr;
  }

  .home-outcomes {
    gap: var(--space-action);
  }

  .home-outcomes p {
    text-align: left;
  }

  .home-outcomes p + p {
    border-left: 0;
  }

  .home-flow-media-document .home-feature-media-frame,
  .home-flow-media-inset .home-feature-media-frame {
    width: 100%;
  }

  .home-detail,
  .home-final,
  .trade-workflow,
  .trade-examples {
    padding: var(--space-form);
  }

  .trade-index-hero {
    border-radius: calc(var(--radius-panel) * 2);
    padding: calc(var(--space-section) * 1.5) var(--space-form);
  }

  .trade-directory-grid,
  .trade-directory-compact .trade-directory-grid,
  .trade-directory-link-grid,
  .trade-benefit-grid {
    grid-template-columns: 1fr;
  }

  .trade-directory-card {
    min-height: 0;
  }

  .trade-directory-card-link {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 38%);
  }

  .trade-directory-card-summary .trade-directory-card-copy {
    padding: var(--space-action) var(--space-action) 0;
  }

  .trade-directory-card-summary .trade-directory-card-visual {
    min-height: 150px;
    padding: var(--space-compact) var(--space-action);
  }

  .trade-directory-card-summary .trade-directory-card-visual img {
    width: min(100%, 280px);
  }

  .trade-directory-card-summary .home-text-link {
    padding: 0 var(--space-action) var(--space-action);
  }

  .trade-directory-link-grid .trade-directory-card {
    min-height: 116px;
  }

  .trade-directory-compact .trade-directory-card {
    min-height: 220px;
  }

  .trade-directory-card-copy {
    padding: var(--space-action) 0 var(--space-action) var(--space-action);
  }

  .trade-directory-compact .trade-directory-card-copy {
    padding: var(--space-action) var(--space-action) 0;
  }

  .trade-directory-compact .trade-directory-card .home-text-link {
    padding: 0 var(--space-action) var(--space-action);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-feature-media-frame img {
    will-change: auto;
  }

  .home-runway-scene,
  .home-runway-track {
    transition: none;
  }
}

.pricing-page {
  margin-top: 0;
}

.pricing-shell {
  width: min(1220px, calc(100vw - 32px));
  margin-top: 64px;
}

.pricing-hero {
  display: block;
  margin: 0;
  background: radial-gradient(circle at center, rgba(36, 87, 166, 0.18), transparent 34rem), var(--pricing-hero-bg);
}

.pricing-hero-inner {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 380px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 116px;
  text-align: center;
}

.pricing-eyebrow {
  display: inline-flex;
  box-sizing: border-box;
  height: 32px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(224, 163, 22, 0.62);
  border-radius: 999px;
  padding: 0 12px;
  color: #ffd76a;
  background: rgba(224, 163, 22, 0.12);
  font-size: var(--text-sm);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e0a316;
}

.pricing-eyebrow-label {
  display: inline-block;
  transform: translateY(0.5px);
}

.pricing-hero h1 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: var(--line-heading);
}

.pricing-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-top: 0;
}

.pricing-card {
  position: relative;
  display: flex;
  min-height: 620px;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(23, 32, 27, 0.1);
}

.pricing-card::before {
  content: "";
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background: var(--accent);
}

.pricing-card-primary {
  border-color: rgba(14, 93, 75, 0.55);
}

.pricing-card-primary::before {
  display: block;
  background: var(--accent);
}

.pricing-card-badge {
  position: absolute;
  top: 20px;
  right: 22px;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--state-needs-attention-text);
  background: var(--state-needs-attention-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.pricing-card-icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: 18px;
  color: var(--accent);
  background: rgba(14, 93, 75, 0.1);
}

.pricing-card-primary .pricing-card-icon {
  color: #ffffff;
  background: var(--accent);
  box-shadow: 0 12px 24px rgba(14, 93, 75, 0.18);
}

.pricing-card-icon::before {
  content: "";
  width: 38px;
  height: 38px;
  background: currentColor;
}

.pricing-card-icon-trial::before {
  mask: url("/assets/pricing-trial-car.svg?v=2026073048") center / contain no-repeat;
  -webkit-mask: url("/assets/pricing-trial-car.svg?v=2026073048") center / contain no-repeat;
}

.pricing-card-icon-monthly::before {
  mask: url("/assets/pricing-monthly-cooperation.svg?v=2026073049") center / contain no-repeat;
  -webkit-mask: url("/assets/pricing-monthly-cooperation.svg?v=2026073049") center / contain no-repeat;
}

.pricing-card-icon-annual::before {
  mask: url("/assets/pricing-annual-piggy-bank.svg?v=2026073050") center / contain no-repeat;
  -webkit-mask: url("/assets/pricing-annual-piggy-bank.svg?v=2026073050") center / contain no-repeat;
}

.pricing-card h2 {
  margin: 18px 0 8px;
  color: var(--ink);
  font-size: var(--text-page-title);
  line-height: var(--line-heading);
  text-align: center;
}

.pricing-card > p {
  min-height: 4.65em;
  margin: 0;
  color: var(--muted);
  line-height: var(--line-body);
  text-align: center;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 30px 0 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.pricing-card-price strong {
  color: var(--ink);
  font-size: clamp(2.8rem, 5.4vw, 4.1rem);
  font-weight: var(--weight-heading);
  line-height: var(--line-tight);
  white-space: nowrap;
}

.pricing-card-price span {
  color: var(--ink);
  font-size: var(--text-lede);
}

.pricing-card-price-taxed {
  gap: 4px;
}

.pricing-card-price-taxed > span:not(.pricing-card-tax) {
  font-size: var(--text-body);
  white-space: nowrap;
}

.pricing-card-price .pricing-card-tax {
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.pricing-feature-list,
.pricing-includes-list {
  display: grid;
  gap: var(--space-card-list);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-feature-list li,
.pricing-includes-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  color: var(--muted);
  line-height: var(--line-card);
}

.pricing-feature-list li {
  font-size: var(--text-card);
}

.pricing-feature-list li span,
.pricing-includes-list li span {
  display: inline-flex;
  width: 24px;
  height: 1em;
  align-items: center;
  justify-content: center;
  color: #2fbf7a;
  font-weight: var(--weight-heading);
  line-height: 1;
}

.pricing-feature-list li span::before,
.pricing-includes-list li span::before {
  content: "\2713";
}

.pricing-card-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
}

.pricing-card-footer .button {
  width: 100%;
}

.pricing-card-footer p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--line-body);
  text-align: center;
}

.pricing-includes {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 28px;
  background: var(--panel);
}

.pricing-includes h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-page-title);
  line-height: var(--line-heading);
}

.pricing-includes-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}

.auth-shell {
  width: min(var(--layout-auth-shell-max-width), calc(100vw - var(--layout-shell-gutter)));
  margin: 64px auto;
}

.profile-shell {
  width: min(var(--profile-panel-max-width), calc(100vw - var(--layout-shell-gutter)));
}

.onboarding-page {
  --onboarding-content-width: min(980px, 100%);
  display: grid;
  gap: var(--space-section);
  justify-items: center;
  width: min(var(--layout-shell-max-width), calc(100vw - var(--layout-shell-gutter)));
  margin: 64px auto;
}

.onboarding-page > .onboarding-progress,
.onboarding-page > .auth-panel,
.onboarding-page > .profile-panel,
.onboarding-page > .services-setup-wizard,
.onboarding-page > .page-heading,
.onboarding-page > .service-setup-grid,
.onboarding-page > .onboarding-actions,
.onboarding-page > .onboarding-finish-panel {
  width: var(--onboarding-content-width);
}

.onboarding-page > .auth-panel {
  margin-inline: auto;
}

.onboarding-page > .profile-panel {
  margin-inline: auto;
  max-width: var(--profile-panel-max-width);
}

.onboarding-page > .services-setup-wizard {
  margin-inline: auto;
}

.services-setup-wizard {
  gap: var(--space-section);
}

.services-management-heading {
  margin: 0 0 var(--space-section);
}

.services-wizard-start,
.services-wizard-panel {
  display: grid;
  gap: var(--space-field);
}

.services-wizard-start {
  gap: var(--space-section);
}

.services-wizard-paths {
  display: grid;
  grid-template-columns: repeat(2, var(--wizard-choice-card-width));
  justify-content: center;
  gap: var(--space-section);
}

.surface-card {
  --card-surface-bg: var(--surface-card-bg);
  --card-surface-overlay: var(--surface-card-overlay);
  --card-surface-border: var(--surface-card-border);
  display: grid;
  box-sizing: border-box;
  min-height: var(--wizard-trade-card-min-height);
  border: 2px solid var(--card-surface-border);
  border-radius: var(--radius-panel);
  color: var(--ink);
  text-decoration: none;
  background: var(--card-surface-overlay), var(--card-surface-bg);
  overflow: hidden;
  transition: border-color 0.16s ease;
}

.surface-card:hover,
.surface-card:focus-visible {
  border-color: var(--button-primary-bg);
}

.surface-card-surface {
  position: relative;
  display: grid;
  gap: var(--space-field);
  min-height: 100%;
  padding: var(--space-section);
  border-radius: calc(var(--radius-panel) - 1px);
  box-sizing: border-box;
}

.surface-card-icon {
  display: inline-grid;
  width: var(--wizard-choice-card-icon-glyph-size);
  height: var(--wizard-choice-card-icon-glyph-size);
  align-items: center;
  justify-items: center;
  color: var(--button-primary-bg);
}

.surface-card-icon svg {
  display: block;
  width: var(--wizard-choice-card-base-icon-size);
  height: var(--wizard-choice-card-base-icon-size);
}

.surface-card-pill {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--button-primary-bg);
  background: var(--surface-card-pill-bg);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--line-tight);
}

.surface-card-copy {
  display: grid;
  gap: 10px;
  max-width: 620px;
}

.surface-card-copy strong {
  font-size: var(--text-h2);
  line-height: var(--line-tight);
}

.surface-card-action-cue {
  display: inline-grid;
  width: var(--wizard-choice-card-cue-size);
  height: var(--wizard-choice-card-cue-size);
  align-self: end;
  align-items: center;
  justify-items: center;
  border-radius: var(--radius-pill);
  color: var(--button-primary-bg);
  background: var(--surface-card-action-bg);
  font-size: 34px;
  font-weight: var(--weight-strong);
  line-height: 1;
}

.services-wizard-path {
  --card-surface-bg: var(--surface-card-bg);
  --card-surface-border: var(--surface-card-border);
  --surface-card-copy-title-line-height: 1.06;
  --surface-card-copy-title-height: 6.5rem;
  --surface-card-copy-gap: var(--space-compact);
  --surface-card-copy-line-height: 1.55rem;
  --surface-card-copy-text-height: 4.65rem;
  --surface-card-copy-block-height: calc(
    var(--surface-card-copy-title-height) + var(--surface-card-copy-gap) + var(--surface-card-copy-text-height)
  );
  --surface-card-cue-size: var(--wizard-choice-card-cue-size);
  width: 100%;
  min-height: var(--wizard-choice-card-min-height);
}

.services-wizard-path-custom {
  --card-surface-bg: var(--surface-card-bg-alt);
  --card-surface-border: var(--surface-card-border-alt);
}

.services-wizard-path .surface-card-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) var(--surface-card-copy-block-height);
  padding: var(--wizard-choice-card-padding);
}

.services-wizard-path .surface-card-pill {
  grid-column: 1;
  grid-row: 1;
  max-width: calc(100% - 56px);
  align-self: start;
  justify-self: start;
}

.services-wizard-path .surface-card-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: var(--wizard-choice-card-icon-size);
  height: var(--wizard-choice-card-icon-size);
  align-self: start;
  justify-self: end;
  margin-right: clamp(8px, 2vw, 24px);
  transform: translateY(clamp(8px, 1.5vw, 16px));
}

.services-wizard-path .surface-card-icon svg {
  width: var(--wizard-choice-card-icon-glyph-size);
  height: var(--wizard-choice-card-icon-glyph-size);
}

.services-wizard-choice-icon {
  display: block;
  width: var(--wizard-choice-card-icon-glyph-size);
  height: var(--wizard-choice-card-icon-glyph-size);
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.services-wizard-choice-icon-services {
  mask-image: url("/assets/services-wizard/services.svg");
  -webkit-mask-image: url("/assets/services-wizard/services.svg");
}

.services-wizard-choice-icon-sketch {
  mask-image: url("/assets/services-wizard/sketch.svg");
  -webkit-mask-image: url("/assets/services-wizard/sketch.svg");
}

.services-wizard-path .surface-card-copy {
  grid-column: 1 / 2;
  grid-row: 3;
  align-self: end;
  gap: var(--surface-card-copy-gap);
  grid-template-rows: var(--surface-card-copy-title-height) var(--surface-card-copy-text-height);
  max-width: 560px;
  padding-right: var(--space-section);
}

.services-wizard-path .surface-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  align-self: end;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 2.45rem;
  line-height: var(--surface-card-copy-title-line-height);
  max-width: 100%;
  max-height: var(--surface-card-copy-title-height);
}

.services-wizard-path .surface-card-copy > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-height: var(--surface-card-copy-text-height);
  line-height: var(--surface-card-copy-line-height);
}

.services-wizard-path .surface-card-action-cue {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
}

.services-wizard-path .surface-card-icon {
  color: var(--button-primary-bg);
}

.services-wizard-path .surface-card-copy > span,
.services-wizard-review-list span,
.services-wizard-service-group small {
  color: var(--muted);
}

.services-wizard-trade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-field);
}

.services-wizard-trade-card {
  position: relative;
  cursor: pointer;
}

.services-wizard-trade-card.is-disabled {
  cursor: not-allowed;
}

.services-wizard-trade-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.services-wizard-trade-card-surface {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--wizard-trade-card-min-height);
  padding: var(--space-field);
  border: 2px solid var(--services-wizard-card-border);
  border-radius: var(--radius-panel);
  background: var(--surface-card-overlay-quiet), var(--surface-card-bg);
  color: var(--ink);
  overflow: hidden;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.services-wizard-trade-card:not(.is-disabled):hover .services-wizard-trade-card-surface,
.services-wizard-trade-card:not(.is-disabled):active .services-wizard-trade-card-surface,
.services-wizard-trade-card:not(.is-disabled):focus-within .services-wizard-trade-card-surface {
  border-color: var(--surface-card-hover-border);
  box-shadow: 0 0 0 2px var(--surface-card-hover-border);
}

.services-wizard-trade-card.is-disabled .services-wizard-trade-card-surface {
  border-color: var(--surface-card-border-disabled);
  background: var(--surface-card-overlay-disabled), var(--surface-card-bg-disabled);
  color: var(--muted);
}

.services-wizard-trade-card.is-disabled .services-wizard-trade-visual {
  opacity: 0.4;
  filter: grayscale(1);
}

.services-wizard-trade-card:has(input:checked) .services-wizard-trade-card-surface {
  border-color: var(--button-primary-bg);
  background: var(--surface-card-overlay-selected), var(--surface-card-bg-selected);
}

.services-wizard-trade-visual {
  display: inline-grid;
  width: var(--wizard-trade-card-visual-size);
  height: var(--wizard-trade-card-visual-size);
  align-items: center;
  justify-items: center;
  border-radius: var(--radius-pill);
  color: var(--button-primary-bg);
  background: rgba(255, 255, 255, 0.78);
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: 1;
}

.services-wizard-trade-visual.has-image {
  width: min(78%, var(--wizard-trade-card-image-width));
  height: var(--wizard-trade-card-image-height);
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.services-wizard-trade-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.services-wizard-trade-selected-mark {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: none;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--button-primary-bg);
  background: transparent;
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
  line-height: 1;
}

.services-wizard-trade-unavailable-mark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--line-tight);
}

.services-wizard-trade-card:has(input:checked) .services-wizard-trade-selected-mark {
  display: inline-flex;
}

.services-wizard-trade-card:has(input:checked) .services-wizard-trade-visual {
  color: var(--button-primary-bg);
}

.services-wizard-form {
  display: grid;
  gap: var(--space-field);
}

.services-wizard-trade-panel {
  gap: var(--space-section);
}

.services-wizard-prices-panel {
  gap: var(--space-section);
}

.services-wizard-intro {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.services-wizard-field-label {
  color: var(--ink);
}

.services-wizard-pick-panel {
  gap: var(--space-section);
}

.services-wizard-pick-form {
  gap: var(--space-field);
}

.media-card {
  --media-card-border: var(--line);
  --media-card-visual-bg: var(--surface-card-bg);
  --media-card-visual-overlay: var(--surface-card-overlay);
  display: grid;
  overflow: hidden;
  border: 2px solid var(--media-card-border);
  border-radius: var(--media-card-radius);
  background: var(--panel);
}

.media-card-visual {
  position: relative;
  margin: var(--media-card-inset) var(--media-card-inset) 0;
  height: var(--media-card-visual-height);
  overflow: hidden;
  border-radius: calc(var(--media-card-radius) - 1px);
  background: var(--media-card-visual-overlay), var(--media-card-visual-bg);
}

.media-card-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-card-action-bg);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--line-tight);
}

.media-card-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: inherit;
  object-fit: contain;
}

.media-card-visual-content,
.media-card-visual-fallback {
  display: grid;
  min-height: var(--media-card-visual-height);
  border-radius: inherit;
  place-items: center;
}

.media-card-body {
  display: grid;
  gap: var(--space-card-list);
  padding: var(--media-card-inset) var(--space-action) var(--space-action);
}

.services-wizard-select-all,
.services-wizard-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-field);
  align-items: center;
}

.services-wizard-step-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-field);
  align-items: center;
}

.services-wizard-step-actions .button {
  width: auto;
}

.services-wizard-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-field);
}

.services-wizard-service-group {
  --services-wizard-card-border: var(--surface-card-border-strong);
  align-content: start;
  transition: border-color 0.16s ease;
}

.services-wizard-service-group:hover,
.services-wizard-service-group:active,
.services-wizard-service-group:focus-within {
  --services-wizard-card-border: var(--surface-card-hover-border);
  border-color: var(--surface-card-hover-border);
}

.services-wizard-category-mark {
  display: grid;
  width: var(--wizard-category-mark-size);
  height: var(--wizard-category-mark-size);
  place-items: center;
  border: 2px solid rgba(21, 122, 98, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--accent-strong);
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
}

.services-wizard-checklist {
  display: grid;
  gap: 10px;
  padding-inline: var(--space-field);
}

.services-wizard-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.services-wizard-check input[type="checkbox"] {
  margin: 0;
}

.services-wizard-check span {
  display: grid;
  gap: 2px;
}

.services-wizard-price-trades {
  display: grid;
  gap: var(--space-field);
}

.services-wizard-price-trade {
  --services-wizard-card-border: var(--surface-card-border);
  display: grid;
  gap: var(--space-card-list);
  padding: var(--space-action);
  border: 2px solid var(--services-wizard-card-border);
  border-radius: var(--radius-panel);
  background: var(--surface-card-bg-subtle);
}

.services-wizard-form[data-services-wizard-prices-form] {
  gap: var(--space-section);
}

.services-wizard-price-trade-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-field);
  align-items: baseline;
}

.services-wizard-price-trade-header h2 {
  margin: 0;
  font-size: var(--text-h3);
}

.services-wizard-price-trade-header span {
  color: var(--muted);
  font-weight: var(--weight-heading);
}

.services-wizard-price-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--surface-card-panel-border);
  border-radius: var(--radius-panel);
  background: var(--surface-card-panel-bg);
}

.services-wizard-price-heading,
.services-wizard-price-row {
  display: grid;
  grid-template-columns:
    minmax(var(--wizard-price-item-min-width), 1fr)
    minmax(var(--wizard-price-input-min-width), 0.34fr)
    var(--wizard-price-unit-width)
    var(--wizard-price-field-width);
  gap: var(--space-field);
  align-items: center;
  padding: 12px 14px;
}

.services-wizard-price-heading {
  border-bottom: 1px solid var(--surface-card-heading-divider);
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
}

.services-wizard-price-row {
  min-height: 72px;
}

.services-wizard-price-row + .services-wizard-price-row {
  border-top: 1px solid var(--surface-card-divider);
}

.services-wizard-price-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wizard-price-field-width);
  gap: var(--space-field);
  align-items: end;
}

.services-wizard-price-row-name {
  display: grid;
  gap: 2px;
  align-self: center;
}

.services-wizard-price-row-name strong {
  font-size: var(--text-label);
}

.services-wizard-price-row-name small,
.services-wizard-price-type-text {
  color: var(--muted);
}

.services-wizard-price-type-text {
  font-weight: var(--weight-heading);
}

.services-wizard-price-field,
.services-wizard-unit-cell {
  display: grid;
  gap: 6px;
}

.services-wizard-price-field input,
.services-wizard-unit-cell select {
  width: 100%;
}

.services-wizard-mobile-field-label {
  display: none;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
}

.services-wizard-unit-placeholder {
  display: inline-flex;
  width: 100%;
  min-height: var(--size-field-min-height);
  align-items: center;
  color: var(--muted);
}

.services-wizard-review-summary {
  font-size: var(--text-lede);
  color: var(--muted);
}

.services-wizard-review-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-wizard-review-list li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.services-wizard-custom-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-wizard-custom-form label {
  display: grid;
  gap: 8px;
}

.services-wizard-custom-form .services-wizard-actions-row {
  grid-column: 1 / -1;
}

.auth-panel {
  display: grid;
  gap: var(--space-form-group);
}

.auth-panel > *,
.auth-panel .error,
.auth-panel .notice {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.auth-panel .error,
.auth-panel .notice {
  width: 100%;
  overflow-wrap: anywhere;
}

.legal-agreement {
  align-items: flex-start;
}

.legal-agreement input {
  margin-top: 0.2em;
}

.legal-agreement a {
  color: var(--accent-strong);
  font-weight: var(--weight-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-agreement a:hover,
.legal-agreement a:focus-visible {
  text-decoration-thickness: 2px;
}

.legal-registration-privacy,
.enquiry-privacy-notice {
  font-size: var(--text-sm);
  margin: 0;
}

.site-legal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-action);
  justify-content: center;
  width: min(var(--layout-shell-max-width), calc(100vw - var(--layout-shell-gutter)));
  margin: 0 auto var(--layout-shell-block-end);
  color: var(--muted);
  font-size: var(--text-sm);
}

.site-legal-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition:
    color 120ms ease,
    text-decoration-color 120ms ease;
}

.site-legal-footer a:hover,
.site-legal-footer a:focus-visible {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}

.legal-document {
  max-width: 880px;
  margin: 0 auto;
}

.legal-document h1 {
  color: var(--page-title-color);
  font-size: var(--text-page-title);
  margin-bottom: var(--space-compact);
}

.legal-effective-date {
  margin-top: 0;
}

.legal-section {
  margin-top: var(--space-section);
}

.legal-section h2 {
  font-size: var(--text-h2);
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.content-document-back {
  display: inline-flex;
  color: var(--accent-strong);
  font-weight: var(--weight-strong);
  text-underline-offset: 3px;
}

.content-document > h1 {
  margin-bottom: var(--space-title-copy);
}

.content-document > .lede {
  max-width: none;
  margin: 0;
}

.content-document .legal-section > p {
  margin: var(--space-title-copy) 0 0;
}

.content-document-inline-link {
  color: var(--state-good-text);
  font: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.content-document-inline-link:hover {
  color: color-mix(in srgb, var(--state-good-text) 82%, var(--ink));
  text-decoration-thickness: 2px;
}

.content-document-back-wrap {
  margin: var(--space-section) 0 0;
  padding-top: var(--space-action);
  border-top: 1px solid var(--line);
}

.content-document-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-action);
  margin-top: var(--space-action);
}

.content-document-index-item {
  display: grid;
  grid-template-columns: var(--size-content-index-image) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-action);
  height: calc(var(--size-content-index-image) + (2 * var(--space-action)) + 2px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--space-action);
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

.content-document-index-item:hover,
.content-document-index-item:focus-visible {
  border-color: var(--accent);
  background: var(--soft);
  transform: translateY(-1px);
}

.content-document-index-title {
  overflow: hidden;
  color: var(--accent-strong);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-document-index-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-field);
}

.content-document-index-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-document-index-media {
  display: grid;
  width: var(--size-content-index-image);
  height: var(--size-content-index-image);
  place-items: center;
}

.content-document-index-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.content-document-search {
  display: grid;
  gap: var(--space-field);
  margin-top: var(--space-action);
}

.content-document-search label {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}

.content-document-search-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-supporting-copy);
}

.content-document-steps,
.content-document-list {
  display: grid;
  gap: var(--space-action);
  margin: var(--space-action) 0 0;
  padding-left: calc(var(--space-section) + var(--space-field));
}

.content-document-steps li::marker {
  color: var(--accent-strong);
  font-weight: var(--weight-heading);
}

.content-document-steps strong {
  display: block;
  margin-bottom: var(--space-field);
}

.content-document-steps p {
  margin: 0;
}

.content-document-note {
  margin-top: var(--space-action);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-panel);
  padding: var(--space-action);
  background: var(--soft);
}

.content-document-note p {
  margin: var(--space-field) 0 0;
}

.content-document-figure {
  margin: var(--space-section) 0 0;
}

.content-document-image-wrap {
  position: relative;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--soft);
}

.content-document-image-wrap img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.content-document-callout {
  position: absolute;
  left: var(--callout-x);
  top: var(--callout-y);
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  font-weight: var(--weight-heading);
  background: var(--accent-strong);
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
  transform: translate(-50%, -50%);
}

.content-document-figure figcaption {
  margin-top: var(--space-field);
  color: var(--muted);
  font-size: var(--text-sm);
}

.content-document-callout-key {
  display: grid;
  gap: var(--space-field);
  margin: var(--space-action) 0 0;
}

@media (max-width: 720px) {
  .content-document-index {
    grid-template-columns: 1fr;
  }

  .content-document-index-item,
  .content-document-note {
    padding: var(--space-compact);
  }

  .content-document-index-item {
    grid-template-columns: var(--size-content-index-image-compact) minmax(0, 1fr);
    gap: var(--space-compact);
    height: auto;
  }

  .content-document-index-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .content-document-index-description {
    display: block;
    overflow: visible;
  }

  .content-document-index-media {
    width: var(--size-content-index-image-compact);
    height: var(--size-content-index-image-compact);
  }
}

.profile-panel {
  width: 100%;
}

.profile-panel.operational-panel {
  padding: var(--space-form);
}

.profile-panel.operational-panel > .eyebrow,
.profile-panel.operational-panel > .lede {
  margin: 0;
}

.profile-panel.operational-panel .form-section > div {
  display: grid;
  gap: var(--space-title-copy);
}

.profile-panel.operational-panel .form-section > div > * {
  margin: 0;
}

.profile-panel.operational-panel .form-section > div > h2 {
  color: var(--ink);
  font-size: var(--text-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.profile-panel.operational-panel .form-section > div > h2 + p {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.profile-panel.operational-panel .billing-history > h2 {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.profile-panel.operational-panel .billing-history > p {
  color: var(--muted);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.profile-panel.operational-panel .billing-history .invoice-history-table td {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.profile-panel.operational-panel .invoice-payment-details-security {
  margin: 0;
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.profile-panel.operational-panel .team-invitation-intro h3,
.profile-panel.operational-panel .notice h3 {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.billing-current-subscription {
  display: grid;
  gap: var(--space-action);
}

.billing-preview-panel,
.billing-current-subscription,
.billing-payment-recovery {
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
}

.billing-preview-panel h3,
.billing-current-subscription h3,
.billing-payment-recovery h3 {
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.billing-preview-panel label,
.billing-current-subscription strong,
.billing-payment-recovery .legal-agreement {
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.billing-current-subscription form {
  margin: 0;
}

.billing-plan-card .billing-plan-option {
  display: grid;
  gap: var(--space-form-group);
  padding: var(--space-form-group) 0 0;
}

.billing-plan-card {
  height: 100%;
  min-height: 0;
  width: 100%;
}

.billing-plan-card > p {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.billing-plan-options {
  align-items: stretch;
}

.billing-plan-card .pricing-card-price {
  margin-bottom: 0;
}

.billing-plan-option .legal-agreement {
  align-items: center;
  align-self: stretch;
  justify-content: center;
  padding-block: var(--space-form-group);
}

.billing-plan-option .legal-agreement input {
  margin-top: 0;
}

.billing-plan-option .button-primary {
  width: 100%;
}

.billing-secure-copy {
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
}

.account-access-banner {
  display: flex;
  gap: var(--space-action);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-field) var(--layout-shell-gutter);
  border-bottom: 1px solid var(--state-needs-attention-border);
  color: var(--state-needs-attention-text);
  background: var(--state-needs-attention-panel-bg);
}

.account-access-banner .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.account-access-banner p,
.subscription-owner-message p,
.subscription-secure-copy {
  margin: 0;
}

.subscription-page {
  display: grid;
  gap: var(--space-section);
}

.subscription-pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 395px));
  justify-content: center;
}

.subscription-card-action {
  display: grid;
  gap: var(--space-action);
}

.subscription-card-action .button-primary {
  width: 100%;
}

.subscription-card-action .field-error,
.billing-plan-option .field-error {
  margin: 0;
  color: var(--critical);
  text-align: center;
}

.subscription-owner-message {
  display: grid;
  gap: var(--space-field);
}

.auth-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.hero,
.page-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 20px;
}

.lead-heading-status {
  display: flex;
  margin-top: var(--space-field);
}

.hero {
  min-height: var(--hero-panel-min-height);
  align-items: center;
  padding: var(--space-panel);
  border-radius: var(--radius-panel);
  background: var(--hero-panel-bg);
  border: 1px solid var(--line);
}

.hero.compact {
  min-height: var(--hero-panel-min-height-compact);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  text-transform: uppercase;
  letter-spacing: 0;
}

h1,
h2 {
  margin: 0;
  font-weight: var(--weight-heading);
  letter-spacing: 0;
}

h1 {
  color: var(--page-title-color);
  font-size: var(--text-page-title);
  line-height: var(--line-tight);
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--line-heading);
}

.lede {
  max-width: 560px;
  color: var(--muted);
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.services-lede {
  max-width: none;
}

.contact-strip {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
}

.enquiry-branding-hero {
  display: grid;
  gap: var(--space-section);
  margin-bottom: 20px;
}

.enquiry-branding-hero .quote-branding-header {
  padding-top: var(--space-section);
}

.enquiry-intro {
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-compact);
  padding-top: var(--space-section);
}

.enquiry-intro h1 {
  font-size: var(--text-h2);
  line-height: var(--line-heading);
  text-transform: uppercase;
}

.enquiry-intro .lede {
  margin: 0;
  max-width: none;
  width: 100%;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-sizing: border-box;
  padding: var(--space-form);
  background: var(--panel);
}

.request-form {
  display: grid;
  gap: var(--space-form);
}

.form-section {
  display: grid;
  gap: var(--space-form);
  border-top: 1px solid var(--line);
  padding-top: var(--space-section);
}

.form-section.flush {
  border-top: 0;
  padding-top: 0;
}

.form-section h2 {
  margin-bottom: 4px;
}

.photo-upload {
  display: grid;
  gap: var(--space-compact);
}

.photo-dropzone {
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-panel);
  display: grid;
  min-height: 150px;
  padding: var(--space-form-group);
}

.photo-dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--soft);
}

.photo-dropzone p {
  margin: 0;
  text-align: center;
}

.photo-select-button {
  justify-self: start;
}

.photo-select-button input {
  display: none;
}

.photo-preview-grid,
.photo-thumb-grid {
  display: grid;
  gap: var(--space-compact);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.photo-preview-item,
.photo-thumb {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  display: grid;
  gap: 8px;
  padding: 8px;
}

.photo-preview-item img,
.photo-thumb img {
  aspect-ratio: 1;
  border-radius: var(--radius-media);
  height: auto;
  object-fit: cover;
  width: 100%;
}

.logo-upload[hidden] {
  display: none;
}

.logo-upload .photo-dropzone {
  min-height: 180px;
}

.logo-preview-grid {
  grid-template-columns: minmax(120px, 180px);
}

.logo-preview-item img {
  object-fit: contain;
}

.expandable-panel {
  border-top: 1px solid var(--line);
  box-sizing: border-box;
  display: grid;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

.expandable-panel.is-on {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  gap: var(--space-form-group);
  padding: 0 var(--space-form-group) var(--space-form-group);
}

.expandable-panel .label-with-actions {
  gap: calc(var(--space-compact) / 2);
}

.expandable-panel .label-with-actions-title[data-expandable-panel-title-toggle] {
  cursor: pointer;
}

.expandable-panel .label-with-actions-buttons {
  gap: calc(var(--space-action) / 2);
}

.expandable-panel-header {
  align-items: center;
  background: var(--panel);
  display: flex;
  justify-self: start;
  margin-left: var(--space-action);
  padding: 0 6px;
  transform: translateY(-50%);
}

.expandable-panel.has-header-content .expandable-panel-header {
  display: grid;
  gap: var(--space-grid);
  grid-template-columns: max-content minmax(var(--space-action), 1fr) max-content;
  justify-self: stretch;
  margin-right: var(--space-action);
}

.expandable-panel-header-rule {
  border-top: 1px solid var(--line);
  width: 100%;
}

.expandable-panel.has-header-content.is-off .expandable-panel-header {
  margin-right: calc(var(--space-action) + var(--space-form-group) + 1px);
}

.expandable-panel.is-on .expandable-panel-header {
  margin-left: calc(var(--space-action) - var(--space-form-group) - 1px);
}

.expandable-panel-content {
  display: grid;
  gap: var(--space-form-group);
  margin-top: calc(-1 * var(--space-compact));
}

.quote-preview .quote-add-item-panel {
  margin: var(--space-field) 0;
}

.quote-add-item-panel .quote-add-item {
  border-top: 0;
  margin-top: 0;
  max-width: 100%;
  padding-top: 0;
  width: 100%;
}

[data-quote-draft-form] {
  display: grid;
  gap: var(--space-form);
  max-width: 100%;
  min-width: 0;
}

[data-quote-draft-form] > *,
[data-quote-draft-form] label {
  max-width: 100%;
  min-width: 0;
}

[data-quote-draft-form] input,
[data-quote-draft-form] select,
[data-quote-draft-form] textarea {
  box-sizing: border-box;
  max-width: 100%;
}

.settings-grid {
  display: grid;
  gap: var(--space-form-group);
}

.quote-title-settings select {
  min-width: 9rem;
  width: max-content;
}

.checkbox-row {
  align-items: center;
  display: flex;
  gap: var(--space-compact);
  min-height: var(--size-field-min-height);
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="hidden"] {
  width: auto;
  min-height: 0;
}

.checkbox-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-action);
  min-height: var(--size-field-min-height);
  margin: 0;
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
  cursor: pointer;
}

.checkbox-control input.checkbox-control-input[type="checkbox"] {
  appearance: none;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  width: var(--size-checkbox-control);
  min-width: var(--size-checkbox-control);
  height: var(--size-checkbox-control);
  min-height: var(--size-checkbox-control);
  margin: 0;
  border: 2px solid var(--accent-strong);
  border-radius: var(--radius-media);
  background: var(--panel);
  padding: 0;
}

.checkbox-control input.checkbox-control-input[type="checkbox"]::before {
  width: 0.78rem;
  height: 0.58rem;
  background: var(--panel);
  clip-path: polygon(8% 42%, 0 58%, 39% 100%, 100% 18%, 84% 4%, 38% 69%);
  content: "";
  transform: scale(0);
  transform-origin: center;
}

.checkbox-control input.checkbox-control-input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.checkbox-control input.checkbox-control-input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.checkbox-control input.checkbox-control-input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.checkbox-control input.checkbox-control-input[type="checkbox"]:disabled {
  border-color: var(--accent);
  background: var(--accent);
  cursor: not-allowed;
  opacity: 1;
}

.checkbox-control:has(input:disabled) {
  cursor: not-allowed;
}

.summary-format-fieldset {
  display: grid;
  gap: var(--space-compact);
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.summary-format-fieldset legend {
  margin-bottom: var(--space-compact);
  padding: 0;
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.summary-format-instruction {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.summary-format-choices {
  display: grid;
  gap: 0;
  width: min(var(--size-form-action-width), 100%);
}

.summary-format-choice {
  padding-block: calc(var(--space-field) / 2);
}

.quote-phase-settings {
  align-items: start;
  display: grid;
  gap: var(--space-action);
  grid-template-columns: repeat(2, minmax(0, var(--size-form-action-width)));
  margin-top: var(--space-form-group);
  width: 100%;
}

.quote-phase-count-control,
.quote-phase-label-control {
  align-content: start;
  display: grid;
  gap: var(--space-compact);
  grid-template-rows: var(--size-control-min-height) 4.65em var(--size-field-min-height);
  min-width: 0;
}

.quote-phase-count-control > label,
.quote-phase-label-control > label {
  align-self: start;
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.quote-phase-settings .summary-format-instruction {
  display: -webkit-box;
  height: 4.65em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.quote-phase-count-control select,
.quote-phase-label-control select {
  height: var(--size-field-min-height);
  width: 100%;
}

.quote-phase-settings-error {
  grid-column: 1 / -1;
  margin: 0;
  width: 100%;
}

.quote-phase-count-summary {
  margin: var(--space-form-group) 0 0;
}

.quote-phase-count-summary div {
  display: flex;
  gap: var(--space-action);
  align-items: baseline;
}

.quote-phase-count-summary dt {
  color: var(--muted);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}

.quote-phase-count-summary dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-action);
  justify-content: flex-end;
}

[data-job-request-panel] .form-actions {
  margin-top: var(--space-section);
}

.onboarding-shell {
  gap: var(--space-section);
}

.onboarding-progress {
  margin: 0;
}

.onboarding-progress ol,
.onboarding-overview ol {
  display: grid;
  gap: var(--space-action);
  list-style: none;
  margin: 0;
  padding: 0;
}

.onboarding-progress ol {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.onboarding-progress a,
.onboarding-progress-card,
.onboarding-overview a:not(.button) {
  align-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  color: var(--ink);
  display: grid;
  gap: var(--space-field);
  grid-template-rows: 28px var(--onboarding-progress-title-height);
  height: 100%;
  justify-items: center;
  min-height: var(--onboarding-progress-card-min-height);
  padding: 14px;
  text-align: center;
  text-decoration: none;
}

.onboarding-progress-card {
  cursor: not-allowed;
}

.onboarding-progress strong,
.onboarding-overview strong {
  align-self: center;
  color: var(--ink);
  display: -webkit-box;
  font-size: var(--text-body);
  line-height: var(--line-heading);
  max-height: var(--onboarding-progress-title-height);
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.onboarding-progress li.active a {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.onboarding-panel {
  display: grid;
  gap: 8px;
}

.onboarding-panel h2,
.onboarding-finish-panel h1 {
  margin: 0;
}

.onboarding-actions,
.onboarding-finish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-action);
  justify-content: flex-end;
  margin-top: var(--space-section);
}

.onboarding-actions > :first-child:not(:last-child) {
  margin-right: auto;
}

.onboarding-actions-previous-only {
  justify-content: flex-start;
}

.onboarding-finish-actions {
  justify-content: flex-start;
}

.onboarding-overview {
  display: grid;
  gap: var(--space-section);
}

.onboarding-overview a {
  grid-template-columns: auto 1fr;
}

.onboarding-overview p {
  color: var(--muted);
  margin: 4px 0 0;
}

.onboarding-defaults-list {
  display: grid;
  gap: var(--space-action);
}

.onboarding-defaults-list div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding-bottom: var(--space-action);
}

.onboarding-defaults-list span {
  color: var(--muted);
}

.tab-nav {
  background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 4px;
  scrollbar-width: thin;
}

.tab-nav a {
  border: 1px solid transparent;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  color: var(--muted);
  flex: 0 0 auto;
  font-weight: var(--weight-heading);
  padding: 10px 16px 11px;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}

.tab-nav a:hover {
  background: var(--row-hover);
  color: var(--accent-strong);
}

.tab-nav a.active {
  background: var(--panel);
  border-color: var(--line);
  border-bottom-color: transparent;
  color: var(--accent-strong);
}

.tab-nav a.active::after {
  background: var(--panel);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.panel-tabs {
  background: none;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

.panel-tabs a.active {
  border-bottom-color: var(--panel);
  box-shadow: 0 2px 0 var(--panel);
  margin-bottom: -1px;
  z-index: 3;
}

.panel-tabs a.active::after {
  bottom: -2px;
  height: 3px;
}

.panel-tabs + .panel {
  border-top-left-radius: 0;
  margin-top: -1px;
}

.panel-tabs + .document-editor-workspace {
  margin-top: -1px;
}

.panel-tabs + .document-editor-workspace > .panel:first-child {
  border-top-left-radius: 0;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-grid);
}

.field-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-touch-target);
  align-items: center;
  gap: var(--space-action);
  width: 100%;
}

.field-control-row select {
  min-width: 0;
}

.mini-icon-button {
  width: var(--size-touch-target);
  height: var(--size-touch-target);
  min-height: var(--size-touch-target);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-control);
  padding: 0;
  font-size: 1.45rem;
  line-height: 1;
}

.service-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-section);
  margin-bottom: var(--space-field);
}

.service-setup-grid + .onboarding-actions {
  margin-top: 0;
}

.custom-services-setup-grid {
  row-gap: var(--space-action);
}

.custom-services-step-guidance {
  align-items: flex-start;
  display: grid;
  gap: var(--space-action);
  grid-template-columns: auto minmax(0, 1fr);
}

.custom-services-step-guidance p {
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--line-body);
  margin: 0;
  white-space: pre-line;
}

.service-setup-grid-single-panel {
  grid-template-columns: minmax(0, min(var(--service-editor-panel-max-width), 100%));
  justify-content: center;
}

.custom-services-onboarding-page > .service-setup-grid {
  margin-bottom: 0;
}

.custom-services-onboarding-page > .service-message-anchor {
  display: none;
}

.custom-services-onboarding-page > .onboarding-actions {
  margin-top: 0;
}

.service-editor-column {
  display: flex;
  flex-direction: column;
}

.service-management {
  max-width: 720px;
  margin-bottom: 18px;
}

.service-setup-grid .service-management,
.service-setup-grid .starter-services-panel,
.service-setup-grid .services-notice {
  max-width: none;
  margin-bottom: 0;
}

.service-setup-grid .service-management {
  display: flex;
  flex: 1;
}

.service-setup-grid .service-management > .panel {
  width: 100%;
  flex: 1;
}

.service-editor-anchor {
  height: 0;
  scroll-margin-top: calc(64px + var(--space-section));
}

.service-list-panel {
  scroll-margin-top: calc(var(--topbar-height) + var(--space-section));
}

.service-message-anchor {
  height: 0;
  scroll-margin-top: calc(64px + var(--space-section));
}

.services-notice {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  max-width: none;
}

.service-catalogue-notice {
  margin-bottom: var(--space-section);
}

.starter-services-panel {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin-bottom: var(--space-section);
  scroll-margin-top: calc(64px + var(--space-section));
}

.starter-services-list {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
}

.starter-trade-filter {
  display: grid;
  gap: var(--space-field);
  margin-bottom: var(--space-field);
}

.starter-service-option {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.starter-service-option:last-child {
  border-bottom: 0;
}

.starter-service-option:hover,
.starter-service-option.active {
  background: var(--soft);
}

.starter-service-option strong {
  font-weight: var(--weight-heading);
}

.starter-service-option span {
  color: var(--muted);
  font-size: var(--text-small);
}

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

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.filter-group,
.compact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-group li,
.compact-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--soft);
}

.filter-option,
.compact-list a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-control);
  border: 0;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
}

.filter-option.active,
.compact-list a.active {
  background: var(--accent);
  color: #fff;
}

.filter-group-panel {
  padding: var(--space-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
}

.filter-group-transparent {
  background: transparent;
}

.filter-option-critical.active {
  background: var(--state-critical-bg);
  color: var(--state-critical-text);
}

.filter-option-needs-attention.active {
  background: var(--state-needs-attention-bg);
  color: var(--state-needs-attention-text);
}

.filter-option-stable.active {
  background: var(--state-stable-bg);
  color: var(--state-stable-text);
}

.filter-option-good.active {
  background: var(--state-good-bg);
  color: var(--state-good-text);
}

.filter-option-excellent.active {
  background: var(--state-excellent-bg);
  color: var(--state-excellent-text);
}

.filter-option-count {
  font-weight: var(--weight-heading);
}

.portal-filters {
  width: 100%;
  margin-bottom: var(--space-grid);
}

.filter-group-job-board {
  width: 100%;
}

.filter-group-job-board li {
  background: transparent;
}

.filter-group-job-board .filter-option {
  min-height: var(--size-control-min-height);
  padding: var(--space-field) var(--space-action);
  background: var(--soft);
}

.portal-search {
  display: flex;
  align-items: center;
  gap: var(--space-action);
  width: 100%;
  margin-bottom: var(--space-grid);
  padding: var(--space-action);
}

.portal-search-form {
  display: flex;
  align-items: center;
  gap: var(--space-action);
  flex: 1 1 auto;
  margin: 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-action);
  margin-top: var(--space-section);
}

.pagination-pages {
  display: flex;
  gap: var(--space-compact);
}

.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-min-height);
  min-height: var(--size-control-min-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--text);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.pagination-page:hover,
.pagination-page:focus-visible,
.pagination-page-current {
  border-color: var(--accent-strong);
}

.pagination-page-current {
  background: var(--accent-strong);
  color: var(--button-pressed-text);
}

.pagination-gap {
  align-self: center;
  color: var(--muted);
}

.pagination [aria-disabled="true"] {
  border-color: var(--button-disabled-border);
  background: var(--button-disabled-bg);
  color: var(--button-disabled-text);
}
.maintenance-banner-slot:empty {
  display: none;
}

.maintenance-banner {
  color: var(--state-needs-attention-text);
  background: var(--state-needs-attention-bg);
  border-bottom: 1px solid var(--state-needs-attention-border);
}

.maintenance-banner-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-field);
  align-items: center;
  width: min(calc(100% - (2 * var(--layout-shell-gutter))), var(--layout-site-shell-max-width));
  margin: 0 auto;
  padding-block: var(--space-field);
}

.maintenance-banner-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.maintenance-banner-content {
  display: grid;
  gap: var(--space-field);
}

.maintenance-banner-headline,
.maintenance-banner-message,
.maintenance-banner-time {
  margin: 0;
}

.maintenance-banner-time {
  font-size: 0.875rem;
  font-weight: 700;
}

.maintenance-banner-dismiss {
  min-width: var(--size-touch-target);
  min-height: var(--size-touch-target);
  padding: 0;
  border: 0;
  color: currentColor;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
}

.admin-maintenance-form {
  max-width: var(--service-editor-panel-max-width);
}

@media (max-width: 640px) {
  .pagination {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .pagination-pages {
    order: -1;
    justify-content: center;
    width: 100%;
  }

  .pagination-direction {
    flex: 1;
  }
}

.portal-search-type {
  flex: 0 0 var(--size-portal-search-type);
  width: var(--size-portal-search-type);
  min-height: var(--size-portal-search-control);
}

.portal-search-field {
  flex: 1 1 auto;
  position: relative;
}

.portal-search-field input {
  width: 100%;
  min-height: var(--size-portal-search-control);
  padding-right: var(--size-icon-button);
}

.portal-search-submit {
  position: absolute;
  top: calc(var(--size-portal-search-control) / 2);
  right: calc(var(--space-field) / 2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-portal-search-submit-width);
  min-height: var(--size-portal-search-submit-height);
  height: var(--size-portal-search-submit-height);
  padding: 0;
  transform: translateY(-50%);
  color: var(--state-good-text);
  background: transparent;
  border-color: transparent;
}

.portal-search-submit:hover {
  background: var(--state-good-bg);
  border-color: var(--state-good-bg);
}

.portal-search-submit::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 3px solid currentColor;
  border-radius: 50%;
  transform: translate(-1px, -1px);
}

.portal-search-submit::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 3px;
  margin-left: -3px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transform: rotate(45deg) translate(5px, 8px);
  transform-origin: left center;
}

.portal-search-submit.is-loading::before,
.portal-search-submit.is-loading::after {
  display: none;
}

.portal-search-submit.is-loading,
.portal-search-submit.is-loading:hover {
  color: var(--state-good-text);
  background: transparent;
  border-color: transparent;
}

.portal-search-clear {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size-portal-search-control);
  min-width: var(--size-portal-search-control);
  height: var(--size-portal-search-control);
  min-height: var(--size-portal-search-control);
  border: 0;
  color: transparent;
  background: transparent;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
}

.portal-search-clear::before,
.portal-search-clear::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--button-utility-text);
  transform-origin: center;
}

.portal-search-clear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.portal-search-clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.portal-search-clear:hover,
.portal-search-clear:focus-visible {
  background: var(--button-utility-hover-bg);
}

.portal-search-notice {
  width: 100%;
  margin: 0 0 var(--space-grid);
  border: 1px solid var(--info-border-strong);
  background: var(--state-good-bg);
  color: var(--state-good-text);
}

.portal-feedback-panel {
  display: grid;
  gap: var(--space-form);
  margin-bottom: 18px;
}

.portal-feedback-copy {
  display: grid;
  gap: var(--space-compact);
}

.portal-feedback-copy h2,
.admin-panel h2 {
  margin: 0;
}

.portal-feedback-form {
  display: grid;
  gap: var(--space-form);
}

.portal-feedback-form .form-actions {
  justify-content: flex-end;
}

.portal-feedback-notice {
  margin: 0;
}

.admin-shell {
  display: grid;
  gap: var(--space-section);
}

.admin-metrics {
  margin: 0;
}

.admin-section-selector {
  align-items: end;
  display: grid;
  grid-template-columns: minmax(240px, 520px) max-content;
  gap: var(--space-action);
  padding: var(--space-grid);
}

.admin-section-selector label {
  margin: 0;
}

.admin-section-selector select {
  min-height: var(--size-control-min-height);
}

.admin-panel {
  display: grid;
  gap: var(--space-form);
}

.admin-panel-header {
  align-items: end;
  display: grid;
  gap: var(--space-form);
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
}

.admin-panel-header-full {
  grid-template-columns: minmax(0, 1fr);
}

.admin-panel-header > div:first-child {
  display: grid;
  gap: var(--space-title-copy);
  min-width: 0;
}

.admin-panel-header h2,
.admin-panel-header p {
  margin: 0;
}

.admin-panel-header .muted {
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
  max-width: none;
}

.admin-feedback-filter {
  display: grid;
  gap: var(--space-compact);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-feedback-filter label {
  align-self: end;
}

.admin-table {
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
  width: 100%;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: var(--space-action) var(--space-grid);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  letter-spacing: 0;
  line-height: var(--line-heading);
  text-transform: none;
}

.admin-table td {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
}

.admin-table td strong {
  font-weight: var(--weight-content-label);
}

.admin-table code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-body);
}

.admin-table td span:not(.badge) {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.admin-table .badge {
  margin-top: 0;
}

.admin-accounts-table {
  table-layout: fixed;
}

.admin-accounts-table .admin-account-business {
  width: 27%;
}

.admin-accounts-table .admin-account-created {
  width: 20%;
}

.admin-accounts-table .admin-account-age,
.admin-accounts-table .admin-account-upgraded {
  width: 13%;
}

.admin-accounts-table .admin-account-status {
  width: 18%;
}

.admin-accounts-table .admin-account-plan {
  width: 9%;
}

.admin-table-primary-row > td {
  border-bottom: 0;
  padding-bottom: var(--space-compact);
}

.admin-table-detail-row > td {
  padding-top: 0;
}

.admin-table-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  display: grid;
  gap: var(--space-title-copy);
  padding: var(--space-action) var(--space-grid);
}

.admin-table-detail-label {
  color: var(--muted);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.admin-table-detail p {
  margin: 0;
}

.admin-business-account-detail {
  align-items: end;
  grid-template-columns: minmax(140px, 0.35fr) minmax(300px, 1fr);
}

.admin-table-detail-item {
  display: grid;
  gap: var(--space-field);
}

.admin-table-detail-item .badge {
  justify-self: start;
}

.admin-business-account-detail .admin-inline-form {
  align-items: end;
  display: grid;
  gap: var(--space-action);
  grid-template-columns: minmax(180px, 360px) max-content;
  justify-content: end;
}

.admin-business-account-detail .admin-inline-form label {
  display: grid;
  gap: var(--space-field);
  margin: 0;
}

.admin-errors-table {
  table-layout: fixed;
}

.admin-errors-table th,
.admin-errors-table td {
  overflow-wrap: anywhere;
}

.admin-errors-table thead th:nth-last-child(-n + 2),
.admin-errors-table .admin-table-primary-row td:nth-last-child(-n + 2) {
  padding-inline: var(--space-compact);
  text-align: center;
}

.admin-errors-table .admin-error-priority {
  width: 11%;
}

.admin-errors-table .admin-error-area {
  width: 8%;
}

.admin-errors-table .admin-error-route {
  width: 25%;
}

.admin-errors-table .admin-error-code {
  width: 25%;
}

.admin-errors-table .admin-error-last-seen {
  width: 17%;
}

.admin-errors-table .admin-error-count {
  width: 7%;
}

.admin-clickable-row {
  cursor: pointer;
}

.admin-clickable-row:hover,
.admin-clickable-row:focus-visible {
  background: var(--surface-soft);
}

.admin-clickable-row:hover .table-row-link strong,
.admin-clickable-row:focus-visible .table-row-link strong {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-table .table-row-link {
  color: inherit;
  display: block;
  text-decoration: none;
}

.admin-table .table-row-link:hover strong,
.admin-table .table-row-link:focus-visible strong {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-detail-panel {
  gap: var(--space-form);
}

.admin-detail-header {
  align-items: center;
  display: grid;
  gap: var(--space-compact);
  grid-template-columns: max-content minmax(0, 1fr) max-content;
}

.admin-back-button {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  height: var(--size-control-min-height);
  justify-content: center;
  line-height: 1;
  min-height: var(--size-control-min-height);
  text-decoration: none;
  width: var(--size-control-min-height);
}

.back-arrow-icon {
  display: block;
  height: 16px;
  position: relative;
  width: 14px;
}

.back-arrow-icon::before {
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  content: "";
  transform: rotate(45deg);
  height: 8px;
  left: 4px;
  position: absolute;
  top: 3px;
  width: 8px;
}

.admin-detail-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: var(--size-control-min-height);
  min-width: 0;
}

.admin-detail-title h2 {
  margin: 0;
}

.admin-detail-title time,
.admin-detail-title span {
  color: var(--muted);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
}

.admin-detail-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-compact);
  justify-content: flex-end;
}

.admin-detail-trader {
  margin: 0;
}

.admin-detail-message {
  font-size: var(--text-body);
  line-height: var(--line-body);
  margin: 0;
  max-width: 70ch;
  white-space: pre-wrap;
}

.admin-detail-actions {
  align-items: end;
  display: grid;
  gap: var(--space-action);
  grid-template-columns: repeat(2, minmax(180px, 260px)) max-content;
  justify-content: start;
}

.admin-detail-actions .form-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.admin-detail-view-action {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.admin-feature-flags {
  display: grid;
  gap: var(--space-form);
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}

.admin-feature-flag-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  height: max-content;
  overflow: hidden;
}

.admin-feature-flag-list-item {
  color: var(--ink);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-form);
  text-decoration: none;
}

.admin-feature-flag-list-item + .admin-feature-flag-list-item {
  border-top: 1px solid var(--line);
}

.admin-feature-flag-list-item span {
  color: var(--muted);
  font-size: var(--font-size-small);
}

.admin-feature-flag-list-item:hover,
.admin-feature-flag-list-item.active {
  background: var(--surface-tint);
}

.admin-feature-flag-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: var(--space-form);
  padding: var(--space-form);
}

.admin-feature-flag-summary {
  align-items: start;
  display: grid;
  gap: var(--space-form);
  grid-template-columns: minmax(0, 1fr) max-content;
}

.admin-feature-flag-summary h3,
.admin-feature-flag-summary p {
  margin: 0;
}

.admin-feature-flag-form {
  align-items: end;
  display: grid;
  gap: var(--space-form);
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.admin-feature-clear-rollout {
  align-self: end;
}

.admin-feature-flag-disabled-field span {
  color: var(--button-disabled-text);
}

.admin-feature-flag-disabled-field input:disabled {
  background: var(--button-disabled-bg);
  border-color: var(--button-disabled-border);
  color: var(--button-disabled-text);
  cursor: not-allowed;
}

.admin-feature-flag-meta,
.admin-feature-flag-form .form-actions {
  grid-column: 1 / -1;
}

.admin-feature-flag-form .form-actions {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .admin-section-selector,
  .admin-panel-header,
  .admin-feedback-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-business-account-detail,
  .admin-business-account-detail .admin-inline-form {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .admin-detail-header {
    align-items: start;
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .admin-detail-badges {
    grid-column: 2;
    justify-content: flex-start;
  }

  .admin-detail-actions {
    grid-template-columns: 1fr;
  }

  .admin-feature-flags,
  .admin-feature-flag-summary,
  .admin-feature-flag-form {
    grid-template-columns: 1fr;
  }

  .admin-feature-flag-summary .admin-detail-badges {
    grid-column: auto;
  }
}

.service-list-panel {
  margin-bottom: var(--service-catalogue-panel-gap);
}

.service-item-actions {
  justify-content: space-between;
}

.service-vat-override {
  margin-top: calc(-1 * (var(--space-form) - var(--space-field)));
}

.service-vat-override > .checkbox-row {
  max-width: calc((100% - var(--space-grid)) / 2);
}

.service-vat-override .field-grid {
  margin-top: var(--space-compact);
}

.service-item-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-action);
}

.service-picker {
  display: grid;
  gap: 14px;
}

.service-picker h2 {
  font-size: var(--text-h2);
}

.service-builder {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(10ch, 14ch) minmax(10ch, 14ch) minmax(96px, 0.42fr) minmax(96px, 0.42fr)
    44px;
  align-items: end;
  gap: var(--space-action);
}

.service-room-field {
  grid-column: 1;
  grid-row: 1;
}

.service-builder [data-service-room-dimensions] {
  display: contents;
}

.service-builder [data-service-room-dimensions][hidden] {
  display: none;
}

.service-builder [data-service-room-dimensions] label:first-child {
  grid-column: 2;
  grid-row: 1;
}

.service-builder [data-service-room-dimensions] label:last-child {
  grid-column: 3;
  grid-row: 1;
}

.service-builder [data-service-room-dimensions] input {
  width: 14ch;
}

.service-category-field {
  grid-column: 1;
  grid-row: 3;
}

.service-item-field {
  grid-column: 2;
  grid-row: 3;
}

.service-builder [data-service-dimensions] {
  display: contents;
}

.service-builder [data-service-dimensions][hidden] {
  display: none;
}

.service-builder-trailing {
  display: contents;
}

.service-builder [data-service-quantity-control] {
  grid-column: 3;
  grid-row: 3;
}

.service-builder [data-service-dimensions] label:first-child {
  grid-column: 3;
  grid-row: 3;
}

.service-builder [data-service-dimensions] label:last-child {
  grid-column: 4;
  grid-row: 3;
}

.service-add-button {
  grid-column: 4;
  grid-row: 3;
  align-self: end;
  justify-self: start;
}

.service-builder[data-input-type="length"] [data-service-quantity-control],
.service-builder[data-input-type="area"] [data-service-quantity-control] {
  grid-column: 3 / span 2;
}

.service-builder[data-input-type="length"] .service-add-button,
.service-builder[data-input-type="area"] .service-add-button {
  grid-column: 5;
}

.service-builder[data-input-type="dimensions"] [data-service-quantity-control] {
  grid-column: 5;
}

.service-builder[data-input-type="dimensions"] .service-add-button {
  grid-column: 6;
}

.service-builder[data-input-type="fixed_price"] .service-add-button {
  grid-column: 3;
}

.selected-services {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 14px;
  background: var(--soft);
}

.selected-service-list {
  display: grid;
  gap: var(--space-compact);
  margin: 0;
  padding: 0;
  list-style: none;
}

.selected-service-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-action);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.selected-service-list strong,
.selected-service-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.selected-service-item-name {
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
}

.selected-service-actions {
  display: grid;
  grid-template-columns: 72px 24px;
  align-items: center;
  gap: var(--space-action);
  justify-items: end;
  white-space: nowrap;
}

.selected-service-list-header {
  color: var(--muted);
}

.selected-service-list-header strong,
.selected-service-list-header small {
  font-size: var(--text-label);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
}

.selected-service-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.selected-service-list small {
  display: inline;
  margin-top: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--line-heading);
}

.selected-service-list .selected-service-room-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-top: 2px;
  padding-bottom: 6px;
}

.selected-service-list .selected-service-room-row strong {
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
  line-height: var(--line-body);
}

.selected-service-list .selected-service-room-item {
  padding-left: var(--space-section);
}

.text-button {
  min-height: auto;
  border: 0;
  padding: 0;
  color: var(--brand);
  background: transparent;
  text-decoration: underline;
}

label,
.form-field {
  display: grid;
  gap: var(--space-field);
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--size-field-min-height);
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
  color: var(--ink);
  background: var(--panel);
}

input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--button-disabled-border);
  background: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

input.input-invalid,
select.input-invalid,
textarea.input-invalid {
  border-color: var(--critical-border-strong);
  background: var(--critical-surface-subtle);
}

input.input-invalid:focus-visible,
select.input-invalid:focus-visible,
textarea.input-invalid:focus-visible {
  outline-color: var(--critical-border-strong);
}

textarea {
  resize: vertical;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stats div,
.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 10px;
  background: var(--panel);
}

.stat-card {
  color: var(--ink);
  text-decoration: none;
}

.stat-card.active {
  border-color: var(--accent);
  background: var(--soft);
}

.stats strong {
  display: block;
  font-size: 1.55rem;
  line-height: var(--line-heading);
}

.stats span,
.muted {
  color: var(--muted);
}

.enquiry-job-items-help {
  margin: var(--space-action) 0 0;
  padding-left: 0;
  counter-reset: enquiry-help-step;
  list-style: none;
  line-height: var(--line-body);
}

.enquiry-job-items-help li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  column-gap: var(--space-field);
  counter-increment: enquiry-help-step;
}

.enquiry-job-items-help li::before {
  content: counter(enquiry-help-step) ".";
}

.enquiry-job-items-help li + li {
  margin-top: var(--space-field);
}

.service-builder-help {
  grid-column: 1 / -1;
  grid-row: 2;
  counter-reset: enquiry-help-step 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  text-transform: uppercase;
  letter-spacing: 0;
}

.table-sort-link {
  color: inherit;
  text-decoration: none;
}

.table-sort-link:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

td,
th {
  border-bottom: 1px solid var(--line);
  padding: 14px 10px;
  vertical-align: top;
}

td span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-label);
  line-height: var(--line-heading);
}

.leads-table {
  table-layout: fixed;
}

.leads-table th {
  vertical-align: bottom;
}

.lead-col-customer {
  width: 22%;
}

.lead-col-job {
  width: 30%;
}

.lead-col-income {
  width: 7.5rem;
}

.lead-col-postcode {
  width: 6.5rem;
}

.lead-col-status {
  width: 7.25rem;
}

/* Scheduling only: keep document and financial layouts unchanged. */
.schedule-page {
  width: min(var(--layout-schedule-max-width), calc(100vw - var(--layout-shell-gutter)));
}
.schedule-page > .page-heading {
  margin: 0;
}
.schedule-introduction {
  display: grid;
  gap: var(--space-title-copy);
}
.schedule-introduction h1,
.schedule-introduction p {
  margin: 0;
}
.schedule-introduction p {
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
  color: var(--muted);
}
.schedule-workspace,
.schedule-calendar-area,
.schedule-queue {
  display: grid;
  gap: var(--space-form);
  align-content: start;
  min-width: 0;
}
.schedule-workspace-with-queue {
  --schedule-booking-panel-width: 24rem;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.schedule-workspace {
  --schedule-day-min-width: 16rem;
  container: schedule-workspace / inline-size;
}
.schedule-workspace-with-queue > .schedule-calendar-area {
  flex: 1 1 var(--schedule-day-min-width);
}
.schedule-booking-disclosure {
  flex: 0 1 var(--schedule-booking-panel-width);
  width: 100%;
  max-width: var(--schedule-booking-panel-width);
  min-width: 0;
}
/* 24rem requests + 16rem day + the 22px space-form gap.
   Once the calendar moves below, let the requests use the whole row. */
@container schedule-workspace (width < calc(40rem + 22px)) {
  .schedule-booking-disclosure {
    flex-basis: 100%;
    max-width: none;
  }
}
.schedule-booking-disclosure[data-toolbar-toggle]:not([open]),
.schedule-booking-disclosure[data-toolbar-toggle] > summary {
  display: none;
}
.schedule-queue-toggle:not([hidden]) {
  display: flex;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.schedule-queue-toggle .label-action-button-accent {
  color: var(--accent);
}
.schedule-queue-toggle .label-action-button-accent:is(:hover, :focus-visible, :active) {
  color: var(--accent-strong);
}
.schedule-booking-panel .label-action-button-accent,
.schedule-date-form > .label-action-button-accent {
  color: var(--accent);
}
.schedule-booking-panel .label-action-button-accent:is(:hover, :focus-visible, :active),
.schedule-date-form > .label-action-button-accent:is(:hover, :focus-visible, :active) {
  color: var(--accent-strong);
}
.schedule-booking-disclosure > summary {
  width: fit-content;
  cursor: pointer;
}
.schedule-booking-disclosure[open] > summary {
  margin-bottom: var(--space-action);
}
.schedule-booking-panel {
  display: grid;
  gap: var(--space-form-group);
  padding: var(--space-form);
}
.schedule-booking-panel h2,
.schedule-booking-panel h3,
.schedule-booking-panel p {
  margin: 0;
}
.schedule-booking-panel h2 {
  font-size: var(--text-section-title);
}
.schedule-booking-panel h3 {
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-body);
}
.schedule-booking-panel p {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}
.schedule-booking-panel .schedule-meta {
  font-size: var(--text-supporting-copy);
}
.schedule-booking-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.schedule-booking-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-compact);
  padding-block: var(--space-action);
  border-bottom: 1px solid var(--line);
}
.schedule-booking-row[hidden] {
  display: none;
}
.schedule-booking-copy {
  min-width: 0;
  overflow-wrap: anywhere;
  display: grid;
  gap: var(--space-field);
}
.schedule-booking-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(var(--space-action) / 3);
  align-items: center;
}
.schedule-booking-pagination {
  display: grid;
  gap: var(--space-field);
  font-size: var(--text-supporting-copy);
}
.schedule-queue h2 {
  margin: 0;
  font-size: var(--text-section-title);
  line-height: var(--line-heading);
}
.schedule-page,
.schedule-day,
.schedule-visit {
  display: grid;
  gap: var(--space-form);
}
.schedule-toolbar,
.schedule-actions,
.schedule-date-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-action);
}
.schedule-toolbar {
  flex-direction: column;
  align-items: center;
  gap: var(--space-action);
  padding: var(--space-action);
}
.visit-request-actions > button[type="submit"],
.visit-form-actions > button[type="submit"] {
  margin-inline-start: auto;
}
.schedule-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-action);
  max-width: 100%;
}
.schedule-month {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-inline: var(--size-control-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-action);
}
.schedule-month h2 {
  margin: 0;
  font-size: var(--text-section-title);
  line-height: var(--line-heading);
}
.schedule-month .button {
  border-color: transparent;
}
.schedule-period {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: var(--space-action);
}
.schedule-period .button {
  white-space: nowrap;
}
.schedule-date-form {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.schedule-date-dialog {
  position: fixed;
  margin: 0;
  width: calc(7 * var(--size-field-min-height) + 2 * var(--space-form));
  max-width: calc(100vw - 2 * var(--space-field));
  max-height: calc(100dvh - 2 * var(--space-field));
  overflow: auto;
  padding: var(--space-action);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}
.schedule-date-dialog::backdrop {
  background: transparent;
}
.schedule-picker-heading,
.schedule-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-action);
}
.schedule-picker-heading h2 {
  margin: 0;
  font-size: var(--text-section-title);
  line-height: var(--line-heading);
}
.schedule-picker-grid {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: calc(var(--space-field) / 2);
  margin-block: var(--space-action);
}
.schedule-picker-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-field);
  color: var(--muted);
  font-size: var(--text-supporting-copy);
}
.schedule-picker-grid th,
.schedule-picker-grid td {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}
.schedule-picker-grid th {
  text-transform: none;
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  color: var(--muted);
}
.schedule-picker-grid button {
  width: 100%;
  min-width: 0;
  min-height: var(--size-control-min-height);
  padding: var(--space-field) 0;
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
}
.schedule-picker-grid .schedule-picker-weekend {
  color: var(--critical);
}
.schedule-picker-grid .schedule-picker-adjacent {
  color: var(--muted);
}
.schedule-picker-grid button[aria-current="date"] {
  background: var(--line);
}
.schedule-picker-grid button:hover {
  background: var(--button-secondary-hover-bg);
}
.schedule-picker-grid button.schedule-picker-selected {
  background: var(--accent-strong);
  color: var(--panel);
}
.schedule-actions a[aria-current="page"] {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.schedule-date-form .form-field {
  display: grid;
  gap: var(--space-field);
}
.schedule-calendar {
  display: grid;
  gap: var(--space-grid);
  align-items: stretch;
}
.schedule-calendar-week {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--schedule-day-min-width)), 1fr));
}
.schedule-day {
  min-width: 0;
  grid-row: span var(--schedule-rows);
  grid-template-rows: subgrid;
  gap: var(--space-grid);
}
.schedule-day.schedule-drop-target {
  outline: 3px solid var(--focus-ring-color);
  box-shadow: var(--focus-ring-inner);
}
.schedule-visit[draggable="true"] {
  cursor: grab;
}
.schedule-day h2 {
  margin: 0;
  font-size: var(--text-section-title);
  line-height: var(--line-heading);
  text-align: center;
  align-self: center;
}
.schedule-visits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-form);
}
.schedule-visit {
  gap: var(--space-field);
  overflow-wrap: anywhere;
}
.schedule-calendar .schedule-visits {
  display: contents;
}
.schedule-calendar .schedule-visit,
.schedule-calendar .schedule-empty-day {
  gap: var(--space-action);
  min-width: 0;
  padding: var(--space-form);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  grid-template-rows: auto 1fr auto;
  align-content: start;
}
.schedule-calendar .schedule-empty-day {
  display: grid;
  grid-template-rows: auto;
  place-content: center;
  min-height: calc(6 * var(--space-form));
  border-style: dashed;
  background: transparent;
  text-align: center;
}
.schedule-empty-day p {
  margin: 0;
}
.schedule-card-top,
.schedule-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-compact);
  min-width: 0;
}
.schedule-card-top {
  align-items: center;
  flex-wrap: wrap;
}
.schedule-card-top .schedule-meta {
  white-space: nowrap;
  overflow-wrap: normal;
  line-height: var(--line-heading);
}
.schedule-card-top .badge,
.schedule-assignee {
  flex: none;
}
.schedule-assignee {
  display: grid;
  place-items: center;
  padding: var(--space-compact);
  border-radius: var(--radius-pill);
  background: var(--state-excellent-bg);
  color: var(--state-excellent-text);
}
.schedule-card-address {
  position: static;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  align-self: start;
  color: inherit;
  font-size: var(--text-content-value);
  line-height: var(--line-body);
}
.schedule-calendar .schedule-visit {
  position: relative;
}
.schedule-card-address::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.schedule-calendar .schedule-visit:focus-within {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.schedule-card-bottom h3 {
  min-width: 0;
}
.schedule-card-bottom h3 {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}
.schedule-continuation {
  grid-column: 1 / -1;
}
.schedule-visit h3 {
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}
.schedule-visit p {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
}
.schedule-visit h3,
.schedule-visit p,
.schedule-meta {
  margin: 0;
}
.schedule-meta,
.schedule-visit .schedule-meta {
  font-size: var(--text-supporting-copy);
  color: var(--muted);
}
.appointment-booking-form {
  display: grid;
  gap: var(--space-form);
}
.visit-booking-summary,
.visit-booking-guidance {
  display: grid;
  gap: var(--space-title-copy);
}
.visit-booking-summary h2 {
  margin: 0;
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}
.visit-booking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-action);
}
.visit-booking-heading h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.visit-booking-heading > .badge {
  flex-shrink: 0;
}
.visit-details-actions > .button-primary {
  margin-inline-start: auto;
}
.visit-details-panel {
  container-type: inline-size;
}
@container (max-width: 20rem) {
  .visit-details-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .visit-details-actions > .button {
    width: 100%;
    margin-inline-start: 0;
  }
}
.visit-attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-grid);
}
.visit-attribution > div {
  flex: 1 1 12ch;
  min-width: 0;
  overflow-wrap: anywhere;
}
.visit-booking-summary .schedule-meta,
.visit-booking-guidance .schedule-meta {
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}
.job-request-title {
  flex-wrap: wrap;
  gap: var(--space-action);
  margin-bottom: var(--space-form);
}
.job-request-title h2 {
  margin: 0;
}
.job-visit-booking-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-action);
  margin: 0 0 0 auto;
  max-width: 100%;
}
.job-visits-table {
  width: 100%;
  table-layout: auto;
}

.job-visits-table th,
.job-visits-table td {
  padding: var(--space-action) var(--space-field);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.job-visits-table th {
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.job-visits-table th:nth-last-child(-n + 2),
.job-visits-table td:nth-last-child(-n + 2) {
  width: 1%;
  white-space: nowrap;
}

.job-visits-table td[data-label=""]::before {
  display: none;
}

.job-visit-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(var(--space-action) / 3);
  vertical-align: middle;
}

.job-visit-row-actions form {
  margin: 0;
  display: flex;
}

.job-visits-panel .job-visit-cancel {
  --circle-icon-button-size: var(--size-action-button);
  transform: none;
  border: 1px solid transparent;
  color: var(--state-critical-text);
}

.job-visits-panel .job-visit-cancel .remove-bin-icon {
  width: calc(var(--size-action-icon) * 0.8);
  height: calc(var(--size-action-icon) * 0.8);
  margin: 0;
}

.job-visits-panel .job-visit-cancel .button-loading-spinner {
  margin: 0;
}

.job-visits-panel .job-visit-cancel:is(:hover, :focus-visible, :active) {
  border-color: var(--critical-border);
  background: var(--state-critical-bg);
}

.job-visit-history-table td:nth-last-child(-n + 2) {
  vertical-align: middle;
}

.job-visit-history-table .badge {
  margin: 0;
}

.job-visit-history-table .badge,
.job-visit-history-table .label-action-button {
  vertical-align: middle;
}

#job-requested-visits .job-visits-table th:first-child,
#job-requested-visits .job-visits-table td:first-child {
  width: auto;
  white-space: normal;
}

@media (max-width: 580px) {
  .job-visits-table thead {
    display: none;
  }

  .job-visits-table,
  .job-visits-table tbody,
  .job-visits-table td {
    display: block;
  }

  .job-visits-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-action);
    padding-block: var(--space-action);
    border-bottom: 1px solid var(--line);
  }

  .job-visits-table td {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .job-visits-table td:nth-last-child(-n + 2) {
    width: auto;
  }

  .job-visits-table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-content-label);
    font-weight: var(--weight-content-label);
    line-height: var(--line-heading);
    margin-bottom: var(--space-title-copy);
  }

  .job-visit-history-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .job-visit-history-table td:nth-child(-n + 2) {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 2;
    row-gap: var(--space-title-copy);
  }

  .job-visit-history-table td:nth-child(-n + 2)::before {
    align-self: center;
    margin: 0;
  }

  .job-visit-history-table td:nth-child(3),
  .job-visit-history-table td:nth-child(4) {
    grid-row: 3;
  }

  .job-visit-history-table td:nth-child(5) {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  .job-visit-history-table td:nth-child(5)::before {
    display: none;
  }

  .job-visit-history-table td:last-child {
    grid-column: 3;
    grid-row: 2 / span 2;
    align-self: center;
    justify-self: end;
  }

  #job-requested-visits .job-visits-table tr {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-title-copy);
    align-items: center;
  }
  #job-requested-visits .job-visits-table td:first-child {
    display: contents;
  }
  #job-requested-visits .job-visits-table td:first-child::before {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  #job-requested-visits .job-requested-type-value {
    grid-column: 1;
    grid-row: 2;
  }
  #job-requested-visits .job-visits-table td[data-label=""] {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    display: flex;
    align-items: center;
  }
}

.job-visit-booking-actions select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.job-visits-panel,
.job-visits-group {
  display: grid;
  min-width: 0;
  gap: var(--space-form);
}
.job-visits-group {
  gap: var(--space-action);
}

.job-visits-panel .label-action-button-accent {
  color: var(--accent);
}

.job-visits-panel
  .label-action-button-accent:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, :active) {
  color: var(--accent-strong);
}

.job-visits-heading.section-title {
  flex-wrap: wrap;
  gap: var(--space-action);
  margin: 0;
}
.job-visits-panel h2,
.job-visits-panel h3,
.job-visits-panel p {
  margin: 0;
}

.job-visits-panel .help-popover-content > * + * {
  margin-top: var(--space-action);
}
.job-visits-panel h2 {
  font-size: var(--text-section-title);
}
.job-visits-panel h3 {
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}
#job-site-visits-title,
#visit-change-history,
#schedule-job-picker {
  scroll-margin-top: calc(2 * var(--topbar-height) + var(--space-section));
}
.appointment-booking-form > p {
  margin: 0;
}
.appointment-booking-form .form-field {
  min-width: 0;
}
.schedule-visit .badge {
  justify-self: start;
}
@media (max-width: 540px) {
  .schedule-day {
    grid-row: auto;
    grid-template-rows: none;
  }
}
.appointment-calendar-icon {
  flex: none;
  margin-inline-end: var(--space-compact);
}

.lead-col-created {
  width: 10.5rem;
}

.leads-table td {
  overflow-wrap: anywhere;
}

.leads-table .lead-postcode-cell,
.leads-table .lead-postcode-cell .row-link {
  overflow-wrap: normal;
  white-space: nowrap;
}

.leads-table .lead-status-cell,
.leads-table .lead-status-cell .row-link,
.leads-table .lead-status-cell .badge {
  overflow-wrap: normal;
  white-space: nowrap;
}

.leads-table .lead-updated-cell,
.leads-table .lead-updated-cell .row-link {
  overflow-wrap: normal;
  white-space: normal;
}

.leads-table .lead-status-cell .badge {
  transform: translateY(-6px);
}

.lead-postcode-compact-header {
  display: none;
}

.service-catalogue-table {
  table-layout: fixed;
}

.service-catalogue-table td {
  overflow-wrap: normal;
}

.service-catalogue-table .row-link,
.service-catalogue-table .table-sort-link {
  overflow-wrap: break-word;
}

.service-catalogue-table .service-item-column {
  width: 54%;
}

.service-catalogue-table .service-category-column {
  width: 26%;
}

.service-catalogue-table .service-price-column {
  width: 14%;
  text-align: right;
  white-space: nowrap;
}

.service-catalogue-table .service-price-column .row-link,
.service-catalogue-table .service-price-column .table-sort-link {
  text-align: right;
}

.service-catalogue-table .service-action-column {
  width: 6%;
  text-align: right;
  vertical-align: middle;
}

.service-catalogue-table .service-action-column form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 100%;
}

.team-members-table .team-email-column {
  width: 50%;
  overflow-wrap: anywhere;
}

.team-invitation-form {
  gap: var(--space-form-group);
}

.team-invitation-intro {
  display: grid;
  justify-items: start;
  gap: var(--space-action);
}

.team-invitation-intro h3 {
  margin: 0;
}

.team-role-guide-button {
  width: auto;
  padding-inline: var(--space-section);
  font-size: var(--text-label);
}

.team-members-table {
  table-layout: fixed;
}

.team-members-table .team-role-column {
  width: 26%;
}

.team-members-table .team-status-column {
  width: 24%;
}

.team-members-table .table-actions {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto;
  align-items: center;
  gap: var(--space-grid);
  width: 100%;
  margin: 0;
}

.team-members-table .team-role-select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 8rem;
  margin: 0;
}

.team-members-table .table-actions button {
  flex: 0 0 auto;
  height: var(--size-control-min-height);
  min-height: var(--size-control-min-height);
  min-width: 6.5rem;
  padding-inline: var(--space-section);
  white-space: nowrap;
}

.team-members-table .team-member-toggle {
  justify-self: start;
}

.team-members-table .team-member-save-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-action);
  margin: 0;
}

/* Team membership is intentionally presented as the same card pattern at every width. */
.team-members-table {
  display: grid;
  gap: var(--space-grid);
  width: 100%;
}

.team-members-table .team-member-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--space-form-group) var(--space-grid);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--shadow-elevated-card);
}

.team-members-table .team-member-summary-row {
  display: grid;
  grid-template-areas:
    "email status"
    "role role";
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-title-copy) var(--space-grid);
  width: 100%;
}

.team-members-table .team-member-summary-row .team-email-column {
  grid-area: email;
}

.team-members-table .team-member-summary-row .team-role-column {
  grid-area: role;
}

.team-members-table .team-member-summary-row .team-status-column {
  align-self: start;
  grid-area: status;
  justify-self: end;
}

.team-members-table .team-member-field {
  display: block;
  width: auto;
}

.team-members-table .team-member-field {
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.team-members-table .team-member-field::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--space-title-copy);
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  text-transform: uppercase;
}

.team-members-table .team-member-summary-row .team-status-column::before {
  content: "";
  display: none;
}

.team-members-table .team-member-actions-row:not(:empty) {
  padding-top: var(--space-action);
}

.service-row-deactivate {
  margin-right: var(--space-xs);
}

.leads-table .lead-row td {
  padding: 0;
}

.leads-table .lead-row {
  cursor: pointer;
}

.leads-table .lead-row:nth-child(even) {
  background: var(--row-stripe);
}

.leads-table .lead-row:hover {
  background: var(--row-hover);
}

.leads-table .lead-row:focus-visible {
  border-radius: var(--radius-panel);
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.leads-table .lead-row.active-row {
  background: var(--row-hover);
}

/* The job board uses one card structure at every width; compact screens only reduce its fields. */
.job-board-table,
.job-board-table tbody {
  display: block;
  width: 100%;
}

.job-board-table thead {
  display: none;
}

.job-board-compact-view {
  display: none;
}

.job-board-table .lead-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) max-content max-content;
  grid-template-areas:
    "customer email postcode status"
    "job job income updated";
  gap: var(--space-title-copy) var(--space-grid);
  border-bottom: 1px solid var(--line);
  padding: var(--space-form-group) var(--space-grid);
}

.job-board-table .lead-customer-cell {
  grid-area: customer;
}

.job-board-table .lead-email-cell {
  grid-area: email;
}

.job-board-table .lead-postcode-cell {
  grid-area: postcode;
}

.job-board-table .lead-status-cell {
  align-self: start;
  grid-area: status;
  justify-self: end;
}

.job-board-table .lead-job-cell {
  grid-area: job;
}

.job-board-table .lead-income-cell {
  grid-area: income;
}

.job-board-table .lead-updated-cell {
  grid-area: updated;
}

.job-board-table .lead-row td {
  display: block;
  min-width: 0;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.job-board-table .lead-row td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--space-title-copy);
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  text-transform: none;
}

.job-board-table .lead-row .row-link {
  min-height: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.job-board-table .lead-customer-cell strong {
  font: inherit;
}

.job-board-table .lead-row .lead-status-cell::before {
  content: "";
  display: none;
}

.job-board-table .lead-status-cell .badge {
  margin-top: 0;
  transform: translateY(var(--offset-card-status-title-align));
}

.row-link {
  display: block;
  min-height: 100%;
  padding: 14px 10px;
}

.row-link:focus-visible {
  border-radius: var(--radius-panel);
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 10px;
  background: var(--state-excellent-bg);
  color: var(--state-excellent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  white-space: nowrap;
}

.badge-excellent {
  background: var(--state-excellent-bg);
  color: var(--state-excellent-text);
}

.badge-needs-attention {
  background: var(--state-needs-attention-bg);
  color: var(--state-needs-attention-text);
}

.badge-changes-requested {
  background: var(--state-needs-attention-bg);
  color: var(--state-needs-attention-text);
}

.badge-cancelled {
  background: var(--state-critical-bg);
  color: var(--state-critical-text);
}

.badge-completed {
  background: var(--state-good-bg);
  color: var(--state-good-text);
}

.badge-stable {
  background: var(--state-stable-bg);
  border: 1px solid var(--border);
  color: var(--state-stable-text);
}

.number-indicator {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: var(--text-small);
  font-weight: var(--weight-heading);
  height: 28px;
  justify-content: center;
  line-height: 1;
  width: 28px;
}

.number-indicator-critical {
  background: var(--state-critical-text);
  color: #fff;
}

.number-indicator-needs-attention {
  background: var(--state-needs-attention-text);
  color: #fff;
}

.number-indicator-stable {
  background: var(--row-hover);
  border-color: transparent;
  color: var(--state-stable-text);
}

.number-indicator-stable-accent {
  background: var(--row-hover);
  border-color: var(--state-excellent-text);
  color: var(--state-excellent-text);
}

.number-indicator-good {
  background: var(--state-good-text);
  color: #fff;
}

.number-indicator-excellent {
  background: var(--state-excellent-text);
  color: #fff;
}

.detail-grid {
  --activity-sidebar-width: 19rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--activity-sidebar-width));
  gap: 16px;
  align-items: start;
}

.detail-grid > .panel {
  min-width: 0;
}

.lead-tab-column {
  max-width: 100%;
  min-width: 0;
}

.lead-tab-error {
  margin-bottom: var(--space-section);
}

.lead-tab-column > .panel,
.lead-tab-column > .panel > * {
  max-width: 100%;
  min-width: 0;
}

.lead-tab-column > .panel + .panel {
  margin-top: var(--space-section);
}

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

.section-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

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

.facts div {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 12px;
}

.operational-panel .section-title h2,
.operational-panel .quote-preview-title-row h3 {
  color: var(--ink);
  font-size: var(--text-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.quote-cancel-panel .section-title h2 {
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}

.operational-panel label,
.operational-panel .form-field {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}

.operational-panel .facts dt,
.operational-panel .item-summary-table thead th,
.operational-panel .quote-edit-table td::before,
.operational-panel .activity li > strong {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.operational-panel .facts dd,
.operational-panel .item-summary-table tbody td,
.operational-panel .lead-notes p,
.operational-panel .status-action-copy,
.operational-panel .activity li > span {
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.status-action-panel {
  display: grid;
  gap: var(--space-form);
}

.status-action-panel > .section-title,
.status-action-panel > .status-action-copy {
  margin: 0;
}

.status-action-panel form {
  display: grid;
  gap: var(--space-form);
}

.status-action-panel form > button {
  justify-self: end;
  width: min(var(--size-form-action-width), 100%);
}

.status-action-financial-records,
.invoice-workflow-notice {
  display: grid;
  gap: var(--space-action);
}

.status-action-financial-records p,
.status-action-financial-records ul {
  margin: 0;
}

.status-action-financial-records ul {
  display: grid;
  gap: var(--space-compact);
  padding-left: var(--space-form);
}

.status-action-financial-records > p {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.status-action-financial-records li {
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.status-action-financial-records li span {
  display: block;
  color: var(--muted);
  font-weight: var(--weight-content-value);
}

dt {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  text-transform: uppercase;
}

dd {
  margin: 4px 0 0;
  font-weight: var(--weight-strong);
}

.question-list {
  margin: 0;
  padding-left: 22px;
  line-height: var(--line-list);
}

.qualification-prompts-panel {
  display: grid;
  gap: var(--space-title-copy);
}

.qualification-prompts-panel .section-title {
  margin-bottom: 0;
}

.qualification-prompts-panel .qualification-prompts-status {
  color: var(--muted);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.qualification-prompts-panel .question-list {
  display: grid;
  gap: var(--space-field);
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.request-items,
.quote-preview,
.customer-notes {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  max-width: 100%;
  min-width: 0;
}

.request-items h3,
.quote-preview h3,
.quote-item-section h3,
.customer-notes h3,
.lead-notes h3,
.customer-photos-block h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.quote-preview-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-action);
  margin-inline-start: 0;
}

.quote-preview-title-row h3 {
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.customer-notes p {
  margin: 0;
}

.additional-work-pricing {
  display: grid;
  gap: 14px;
}

.mini-totals {
  display: grid;
  justify-self: end;
  width: min(320px, 100%);
  gap: 4px;
}

.mini-totals div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  line-height: var(--line-heading);
}

.mini-totals span {
  color: var(--muted);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
}

.mini-totals strong {
  box-sizing: border-box;
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  font-variant-numeric: tabular-nums;
  padding-right: 8px;
  text-align: right;
  white-space: nowrap;
}

.quote-line-total-summary div {
  grid-template-columns: minmax(0, 1fr) 10rem;
  gap: 24px;
}

.quote-line-total-summary span {
  text-align: right;
}

.quote-line-total-summary strong {
  font-weight: var(--weight-body);
  text-align: right;
}

.quote-item-section {
  display: grid;
  gap: 10px;
  max-width: 100%;
  overflow: visible;
}

.quote-item-table-scroll {
  display: grid;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.quote-phased-item-sections {
  gap: var(--space-panel);
}

.quote-phase-section {
  display: grid;
  gap: var(--space-section);
  min-width: 0;
}

.quote-phase-heading {
  break-after: avoid;
  font-weight: var(--weight-heading);
  width: 100%;
}

.quote-phase-totals {
  justify-self: stretch;
  width: 100%;
}

.quote-phase-totals div {
  gap: 0;
  grid-template-columns:
    minmax(0, 1fr) var(--quote-col-quantity-width) var(--quote-col-price-width)
    var(--quote-col-amount-width);
}

.quote-phase-totals span {
  grid-column: 1 / 4;
  padding-right: 8px;
  text-align: right;
}

.quote-phase-totals strong {
  grid-column: 4;
  padding-right: 4px;
}

.quote-phase-total-row span,
.quote-phase-total-row strong {
  border-top: 1px solid var(--ink);
  padding-top: 4px;
}

.quote-phase-total-row strong {
  font-weight: var(--weight-content-label);
}

.quote-edit-items {
  margin: 18px 0;
}

.quote-preview-edit-items {
  margin: 0;
}

.quote-edit-items table {
  margin-top: 12px;
}

.quote-preview-edit-items table {
  margin-top: 0;
}

.quote-add-item {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.quote-add-item h3 {
  margin: 0;
}

.quote-add-item-grid {
  --quote-add-value-width: 84px;
  display: grid;
  grid-template-columns: minmax(25%, 0.45fr) minmax(0, 1fr) var(--quote-add-value-width);
  gap: var(--space-form-group);
  align-items: end;
  max-width: 100%;
  width: 100%;
}

.quote-add-item-grid label,
.quote-add-item-grid select,
.quote-add-item-grid input {
  min-width: 0;
  box-sizing: border-box;
}

.quote-add-room-field,
.quote-add-category-field {
  grid-column: 1;
}

.quote-add-service-field {
  grid-column: 2;
}

.quote-add-quantity-field {
  grid-column: 3;
  justify-self: end;
  max-width: var(--quote-add-value-width);
  width: var(--quote-add-value-width);
}

.quote-add-room-dimensions {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 128px));
  gap: var(--space-form-group);
  grid-column: 2 / -1;
  grid-row: 1;
  align-items: end;
  justify-self: end;
}

.quote-add-item-grid [data-quote-add-dimensions] {
  display: contents;
}

.quote-add-item.is-add-dimensions .quote-add-item-grid {
  grid-template-columns: minmax(25%, 0.45fr) minmax(0, 1fr) var(--quote-add-value-width) var(--quote-add-value-width);
}

.quote-add-item.is-add-dimensions .quote-add-service-field {
  grid-column: 2;
}

.quote-add-item.is-add-fixed-price .quote-add-item-grid {
  grid-template-columns: minmax(25%, 0.45fr) minmax(0, 1fr);
}

.quote-add-item.is-add-fixed-price .quote-add-service-field {
  grid-column: 2;
}

.quote-add-room-dimensions[hidden],
.quote-add-item-grid [data-quote-add-dimensions][hidden] {
  display: none;
}

.quote-add-item-grid [data-quote-add-dimensions] label:first-child {
  grid-column: 3;
  justify-self: end;
  max-width: var(--quote-add-value-width);
  width: var(--quote-add-value-width);
}

.quote-add-item-grid [data-quote-add-dimensions] label:last-child {
  grid-column: 4;
  justify-self: end;
  max-width: var(--quote-add-value-width);
  width: var(--quote-add-value-width);
}

.quote-add-room-field {
  grid-row: 1;
}

.quote-add-category-field,
.quote-add-service-field,
.quote-add-quantity-field,
.quote-add-item-grid [data-quote-add-dimensions] label {
  grid-row: 2;
}

.quote-add-item .quantity-input {
  max-width: var(--quote-add-value-width);
  width: 100%;
  text-align: center;
}

.quote-add-submit {
  max-width: 100%;
  width: 100%;
}

.quote-item-section[hidden] {
  display: none;
}

.item-summary-table {
  table-layout: fixed;
  width: 100%;
}

.item-summary-table:not(.quote-edit-table) {
  min-width: var(--quote-summary-table-min-width);
}

.item-summary-table.quote-grouped-summary-table {
  min-width: 0;
  width: 100%;
}

.item-summary-table.invoice-comparison-table {
  min-width: var(--invoice-comparison-table-min-width);
}

.item-summary-table.invoice-comparison-table.quote-grouped-summary-table {
  min-width: 0;
}

.invoice-document-table .quote-col-quantity,
.invoice-comparison-table .quote-col-quantity {
  width: var(--invoice-comparison-quantity-width);
}

.invoice-document-table .quote-col-price,
.invoice-comparison-table .quote-col-price {
  width: var(--invoice-comparison-price-width);
}

.invoice-document-table .quote-col-vat-rate,
.invoice-comparison-table .quote-col-vat-rate {
  width: var(--invoice-comparison-vat-width);
}

.invoice-document-table .quote-col-amount,
.invoice-comparison-table .quote-col-amount {
  width: var(--invoice-comparison-amount-width);
}

.quote-col-item {
  width: auto;
}

.quote-col-phase {
  width: 5rem;
}

.quote-phase-cell select {
  height: 30px;
  min-height: 30px;
  min-width: 4rem;
  padding-block: 2px;
  font-size: var(--text-label);
  line-height: 1.2;
  width: 4rem;
}

.quote-col-quantity {
  width: var(--quote-col-quantity-width);
}

.quote-col-vat-rate {
  width: var(--quote-col-vat-rate-width);
}

.quote-col-edit-quantity {
  width: 5.75rem;
}

.quote-col-unit {
  width: var(--quote-col-unit-width);
}

.quote-col-price,
.quote-col-amount {
  width: var(--quote-col-price-width);
}

.quote-col-amount {
  width: var(--quote-col-amount-width);
}

.quote-col-action {
  width: 2.25rem;
}

.item-summary-table th,
.item-summary-table td {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  padding: 10px 8px;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.item-summary-table:not(.quote-edit-table) th,
.item-summary-table:not(.quote-edit-table) td {
  border-bottom: 0;
  padding: 3px 8px;
}

.item-summary-table:not(.quote-edit-table)
  tbody
  tr:not(.quote-room-row):not(.quote-edit-room-row):not(.quote-category-row)
  td {
  line-height: 1.15;
  padding-bottom: 2px;
  padding-top: 2px;
}

.item-summary-table:not(.quote-edit-table) thead th {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  padding-bottom: 6px;
}

.item-summary-table th:not(:first-child),
.item-summary-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.item-summary-table .quote-category-row th {
  padding-top: var(--space-field);
  padding-bottom: 2px;
  text-align: left;
  white-space: normal;
}

.item-summary-table .quote-category-row span,
.item-summary-table .quote-room-row span,
.item-summary-table .quote-edit-room-row span {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  text-transform: none;
}

.item-summary-table .quote-room-row .quote-room-label,
.item-summary-table .quote-edit-room-row .quote-room-label {
  color: var(--ink);
  display: block;
  font-size: var(--text-content-label);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  text-align: left;
  text-transform: none;
  width: 100%;
}

.item-summary-table .quote-room-row th,
.item-summary-table .quote-edit-room-row th {
  padding-top: var(--space-field);
  padding-bottom: 2px;
  text-align: left;
  white-space: normal;
}

.quote-edit-table .quote-edit-room-row th {
  text-align: left;
}

.item-summary-table tbody tr:first-child.quote-category-row th {
  padding-top: 6px;
}

.item-summary-table tbody tr:first-child.quote-room-row th,
.item-summary-table tbody tr:first-child.quote-edit-room-row th {
  padding-top: 6px;
}

.item-summary-table .quote-category-item-row td:first-child {
  padding-left: var(--space-form-group);
}

.item-summary-table .quote-room-item-row td:first-child {
  padding-left: var(--space-form-group);
}

.item-summary-table .quote-room-category-row th span {
  display: inline-block;
  padding-left: var(--space-form-group);
}

.item-summary-table .quote-room-category-item-row td:first-child {
  padding-left: calc(var(--space-form-group) * 2);
}

.item-summary-table .quote-room-total-row th,
.item-summary-table .quote-category-total-row th {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  text-align: left;
  text-transform: none;
}

.item-summary-table .quote-category-total-row th {
  font-weight: var(--weight-content-value);
}

.item-summary-table .quote-room-total-row td,
.item-summary-table .quote-category-total-row td {
  font-weight: var(--weight-content-value);
}

.item-summary-table .quote-room-category-total-row th {
  padding-left: var(--space-form-group);
}

.item-summary-table .quote-dimension-item-row td:first-child {
  position: relative;
  top: -0.4rem;
}

.quote-item-name,
.quote-item-meta {
  display: block;
}

.quote-item-name {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-top: 0;
}

.quote-item-meta {
  margin-top: 1px;
  color: var(--ink);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: 1.15;
}

.quote-edit-table th,
.quote-edit-table td {
  padding-block: 8px;
}

.quote-edit-table th:last-child,
.quote-edit-table td:last-child {
  text-align: right;
}

.quote-edit-table .quote-category-row th {
  text-align: left;
}

.quote-edit-table [data-quote-quantity-column] {
  text-align: center;
}

.quote-edit-table th.quote-unit-heading,
.quote-edit-table td.quote-unit-cell {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.quote-edit-table td.quote-unit-cell {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.quote-edit-table td:last-child {
  line-height: 0;
}

.quote-edit-table td {
  vertical-align: middle;
}

.quote-mobile-unit {
  display: none;
}

.quote-preview-edit-table tbody th,
.quote-preview-edit-table tbody td {
  border-bottom: 0;
}

.quote-preview-edit-table thead th {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  padding-top: 3px;
  padding-bottom: 6px;
}

.quote-preview-edit-table .quote-category-row th,
.quote-preview-edit-table .quote-edit-room-row th {
  padding-bottom: 0;
  padding-top: 6px;
}

.quote-preview-edit-table [data-quote-edit-line-row] td {
  padding-bottom: 3px;
  padding-top: 3px;
}

.quote-preview-edit-items.is-display-room .quote-room-item-row td:first-child,
.quote-preview-edit-items.is-display-category .quote-category-item-row td:first-child {
  padding-left: var(--space-form-group);
}

.quote-preview-edit-items.is-display-room.is-display-category .quote-room-category-item-row td:first-child {
  padding-left: calc(var(--space-form-group) * 2);
}

.quote-edit-item-name,
.quote-edit-item-meta {
  display: block;
}

.quote-edit-item-name {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.quote-edit-item-meta {
  margin-top: 1px;
  color: var(--ink);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: 1.15;
}

.quote-edit-table .quantity-input,
.quote-edit-table .quote-price-input {
  font-size: var(--text-label);
  line-height: 1.2;
  min-height: 30px;
  padding-block: 2px;
  text-align: center;
}

.quote-edit-table .quantity-input {
  width: 8ch;
}

.quote-edit-table .quote-price-input {
  width: 11ch;
  text-align: right;
}

.quote-price-field {
  display: inline-grid;
  align-items: flex-start;
  gap: 4px;
  white-space: nowrap;
}

.quote-price-field {
  grid-template-columns: auto auto;
}

.quote-price-prefix {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  line-height: 1;
}

.quote-price-prefix {
  padding-top: 14px;
}
.operational-panel .accepted-draft-notice {
  display: grid;
  gap: var(--space-title-copy);
  padding: var(--space-form);
  font-weight: var(--weight-content-value);
}

.operational-panel .accepted-draft-notice h2 {
  margin: 0;
  font-size: var(--text-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.operational-panel .accepted-draft-notice p {
  font-size: var(--text-content-value);
  line-height: var(--line-body);
}

.operational-panel .accepted-draft-notice .form-actions {
  margin: 0;
  gap: var(--space-action);
}

.invoice-panel,
.invoice-create-form,
.invoice-draft-form {
  display: grid;
  gap: var(--space-form);
}

.document-editor-workspace {
  display: grid;
  gap: var(--space-section);
}

.document-editor-workspace,
.document-editor-workspace > .panel,
.document-editor-workspace > .panel > * {
  max-width: 100%;
  min-width: 0;
}

.invoice-panel .section-title {
  align-items: center;
  margin-bottom: 0;
}

.invoice-summary-meta {
  align-items: baseline;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-grid);
  row-gap: calc(var(--space-field) / 2);
  margin: 0;
}

.invoice-summary-meta > div {
  display: contents;
}

.invoice-summary-meta dt {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  text-transform: none;
}

.invoice-summary-meta dd {
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-heading);
  margin: 0;
}

.invoice-items-table {
  width: 100%;
}

.invoice-items-table .numeric {
  text-align: right;
  white-space: nowrap;
}

.invoice-totals {
  margin-left: auto;
}

.invoice-totals span {
  white-space: nowrap;
}

.totals.invoice-comparison-totals div {
  grid-template-columns:
    minmax(0, 1fr) var(--invoice-comparison-quantity-width)
    var(--invoice-comparison-price-width) var(--invoice-comparison-vat-width)
    var(--invoice-comparison-amount-width) var(--invoice-comparison-amount-width);
}

.totals.invoice-comparison-totals span {
  align-items: baseline;
  box-sizing: border-box;
  display: flex;
  grid-column: 5;
  justify-content: flex-end;
  justify-self: stretch;
  min-width: 0;
  text-align: right;
  width: 100%;
}

.totals.invoice-comparison-totals strong {
  align-items: baseline;
  display: flex;
  grid-column: 6;
  justify-content: flex-end;
  justify-self: stretch;
  min-width: 0;
  width: 100%;
}

.totals.invoice-comparison-totals .invoice-comparison-summary-row .invoice-comparison-total-label {
  grid-column: 4;
  grid-row: 1;
}

.totals.invoice-comparison-totals .invoice-comparison-summary-row .invoice-quoted-total-value {
  grid-column: 5;
  grid-row: 1;
  font-weight: var(--weight-body);
}

.totals.invoice-comparison-totals .invoice-comparison-summary-row .invoice-current-total-value {
  grid-column: 6;
  grid-row: 1;
}

.totals.invoice-comparison-totals .invoice-comparison-summary-row span.invoice-current-total-value {
  font-weight: var(--weight-body);
}

.totals.invoice-comparison-totals .total-row::before,
.totals.invoice-comparison-totals .total-row::after {
  left: calc(
    100% -
      (
        var(--invoice-comparison-vat-width) + var(--invoice-comparison-amount-width) +
          var(--invoice-comparison-amount-width)
      )
  );
}

.financial-document-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.financial-document-canvas {
  min-width: 0;
  width: 100%;
}

.invoice-document-canvas {
  align-content: start;
  display: grid;
  gap: var(--space-form);
  grid-auto-rows: max-content;
  min-width: var(--quote-summary-table-min-width);
}

.invoice-document-canvas.invoice-comparison-canvas {
  gap: var(--space-form);
  min-width: var(--invoice-comparison-table-min-width);
}

.invoice-comparison-canvas > .invoice-preview {
  margin-bottom: 0;
}

.invoice-comparison-canvas > .invoice-comparison-totals {
  margin-top: 0;
}

.invoice-document-canvas.invoice-grouped-comparison-canvas {
  min-width: 0;
}

.financial-document-canvas .quote-item-section {
  overflow-x: visible;
}

.invoice-create-total {
  margin: 0;
}

.invoice-create-total .total-row span {
  white-space: nowrap;
}

.invoice-amount-maximum {
  color: var(--muted);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.invoice-amount-maximum strong {
  color: inherit;
  font-weight: var(--weight-content-label);
}

.invoice-create-total .invoice-remaining-row {
  margin-top: var(--space-field);
}

.invoice-create-total .invoice-remaining-row span {
  grid-column: 2 / 4;
  white-space: nowrap;
}

.invoice-actions {
  align-items: flex-end;
  display: flex;
  gap: var(--space-grid);
  justify-content: space-between;
  width: 100%;
}

.invoice-notes-field {
  margin-block: var(--space-content-section);
}

.invoice-payment-reference-field textarea {
  min-height: calc(var(--size-field-min-height) * 2);
}

.invoice-cancel-actions {
  align-items: flex-end;
  display: flex;
}

.invoice-positive-actions {
  align-items: flex-end;
  display: grid;
  gap: var(--space-action);
  justify-items: end;
  width: min(var(--size-form-action-width), 100%);
}

.invoice-positive-actions button,
.invoice-positive-actions > a {
  width: 100%;
}

.invoice-positive-actions > form {
  width: 100%;
}

.invoice-payment-details {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-sizing: border-box;
  display: grid;
  gap: var(--space-title-copy);
  justify-self: start;
  margin-top: var(--space-content-section);
  max-width: 100%;
  padding: var(--space-form-group);
  width: min(100%, var(--size-popover-max-width));
}

.invoice-payment-details > h2,
.quote-document-body .invoice-payment-details > h2 {
  color: var(--ink);
  font-size: var(--text-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.invoice-history-table-wrap {
  overflow-x: auto;
}

.invoice-history-table {
  border-collapse: collapse;
  width: 100%;
}

.invoice-history-table th,
.invoice-history-table td {
  border-bottom: 1px solid var(--line);
  padding: var(--space-action) var(--space-field);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.invoice-history-table th,
.invoice-payment-history-table th {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  text-transform: none;
}

.invoice-history-table .numeric {
  text-align: right;
  white-space: nowrap;
}

.invoice-history-row {
  cursor: pointer;
}

.invoice-history-row:hover,
.invoice-history-row:focus-visible {
  background: var(--row-hover);
}

.invoice-history-row a {
  color: var(--accent-strong);
  font-weight: var(--weight-heading);
  text-decoration: none;
}

.invoice-register-page {
  display: block;
}

.job-invoice-entry {
  display: grid;
  gap: 0;
  min-width: 0;
}

.job-invoice-entry:has(.job-invoice-detail.is-expanded) {
  gap: var(--space-grid);
}

.job-invoice-detail {
  --lead-card-status-color: var(--state-excellent-text);
  --lead-card-status-shadow-soft: color-mix(in srgb, var(--lead-card-status-color) 25%, transparent);
  --lead-card-status-shadow-strong: color-mix(in srgb, var(--lead-card-status-color) 32%, transparent);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 180ms ease,
    opacity 120ms ease;
}

.job-invoice-detail.is-expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  border-radius: var(--radius-panel);
  box-shadow:
    0 2px 10px var(--lead-card-status-shadow-soft),
    0 4px 4px var(--lead-card-status-shadow-strong);
}

.job-invoice-detail.lead-row-cancelled {
  --lead-card-status-color: var(--state-critical-text);
}

.job-invoice-detail.lead-row-completed {
  --lead-card-status-color: var(--state-good-text);
}

.job-invoice-detail.lead-row-stable {
  --lead-card-status-color: var(--state-stable-text);
}

.job-invoice-detail.lead-row-needs-attention {
  --lead-card-status-color: var(--state-needs-attention-text);
}

.job-invoice-detail-inner {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.job-invoice-detail .invoice-panel {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .job-invoice-detail {
    transition: none;
  }
}

.invoice-register-summary {
  display: grid;
  gap: var(--space-grid);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-section);
}

.invoice-register-summary .panel {
  display: grid;
  gap: var(--space-title-copy);
  justify-items: center;
  padding: var(--space-form);
  text-align: center;
}

.reports-page {
  display: grid;
  gap: var(--space-section);
}

.reports-export-panel,
.reports-export-form {
  display: grid;
  gap: var(--space-section);
}

.reports-export-heading {
  display: grid;
  align-items: flex-start;
  gap: var(--space-grid);
  grid-template-columns: minmax(0, 1fr) max-content;
}

.reports-export-heading > div {
  display: grid;
  gap: var(--space-title-copy);
  min-width: 0;
}

.reports-export-heading h2,
.reports-export-heading p,
.reports-guidance p,
.reports-export-includes h3,
.reports-export-includes ul {
  margin: 0;
}

.reports-guidance {
  display: grid;
  gap: var(--space-field);
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.reports-guidance strong {
  font-weight: var(--weight-heading);
}

.reports-export-form label > .muted {
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.reports-export-includes {
  display: grid;
  gap: var(--space-field);
  border-top: 1px solid var(--line);
  padding-top: var(--space-section);
}

.reports-export-includes ul {
  display: grid;
  gap: var(--space-field);
  padding-left: var(--space-form);
}

.reports-export-includes li {
  font-size: var(--text-body);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

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

  .reports-export-heading .badge {
    justify-self: start;
  }
}

.invoice-register-summary span {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}

.invoice-register-summary strong {
  font-size: var(--text-h2);
}

@media (max-width: 800px) {
  .invoice-register-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.invoice-payment-details-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.invoice-payment-details-list div {
  display: grid;
  gap: var(--space-grid);
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  padding-block: calc(var(--space-field) / 4);
}

.invoice-payment-details-list dt {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  text-transform: none;
}

.invoice-payment-details-list dd {
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-heading);
  margin: 0;
}

.invoice-payment-details-list .invoice-payment-amount-row dd {
  font-weight: var(--weight-heading);
}

.invoice-payments {
  display: grid;
  margin-top: 0;
}

.invoice-panel > .invoice-payments {
  margin-top: var(--space-compact);
}

.invoice-preview-page > .invoice-payments {
  margin-inline: auto;
  width: var(--document-preview-sheet-width);
}

.invoice-adjustments {
  display: grid;
  margin-top: var(--space-compact);
}

.invoice-preview-page > .invoice-adjustments {
  margin-inline: auto;
  width: var(--document-preview-sheet-width);
}

.invoice-adjustments .expandable-panel-content {
  display: grid;
  gap: var(--space-form-group);
}

.invoice-variation-entry-panel {
  --invoice-variation-panel-shadow-soft: color-mix(in srgb, var(--state-stable-text) 25%, transparent);
  --invoice-variation-panel-shadow-strong: color-mix(in srgb, var(--state-stable-text) 32%, transparent);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow:
    0 2px 10px var(--invoice-variation-panel-shadow-soft),
    0 4px 4px var(--invoice-variation-panel-shadow-strong);
  display: grid;
  gap: 0;
  padding: 0;
}

.invoice-variation-entry-panel.is-on {
  gap: 0;
  padding: 0;
}

.invoice-variation-entry-panel > .expandable-panel-header,
.invoice-variation-entry-panel.is-on > .expandable-panel-header {
  background: transparent;
  margin: 0;
  padding: var(--space-grid) var(--space-form);
  transform: none;
}

.invoice-variation-entry-panel > .expandable-panel-content {
  display: grid;
  gap: var(--space-form);
  margin: 0;
  padding: 0 var(--space-form) var(--space-form);
}

.invoice-variation-entry-panel > .expandable-panel-content > .status-action-copy,
.invoice-variation-save-notice {
  margin: 0;
}

.invoice-variation-panel-summary {
  align-items: center;
  display: flex;
  gap: var(--space-action);
  justify-content: flex-end;
}

.invoice-variation-panel-empty {
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
  white-space: nowrap;
}

.invoice-variation-form,
.invoice-variation-form-section,
.invoice-variation-history-panel .expandable-panel-content,
.invoice-variation-history {
  display: grid;
  gap: var(--space-form-group);
}

.invoice-variation-form {
  gap: var(--space-form);
}

.invoice-variation-form-section {
  margin: 0;
  padding: 0;
}

.invoice-variation-form-section > h3 {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  margin: 0;
}

.invoice-variation-form label {
  line-height: var(--line-heading);
}

.invoice-variation-save-notice {
  font-size: var(--text-supporting-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.invoice-variation-totals .total-row {
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  padding-block: calc(var(--space-field) / 2);
}

.invoice-variation-row h3 {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  margin: 0;
}

.invoice-variation-list {
  display: grid;
  gap: 0;
}

.invoice-variation-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--space-grid);
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding-block: var(--space-field);
}

.invoice-variation-row p {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
  margin-block: calc(var(--space-field) / 2) 0;
}

.invoice-variation-row p.muted {
  font-size: var(--text-supporting-copy);
}

.invoice-variation-row > strong {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.invoice-variation-row > .badge {
  justify-self: end;
}

.invoice-variation-row-actions {
  align-items: end;
  display: grid;
  gap: var(--space-action);
  justify-items: end;
}

@media (max-width: 700px) {
  .invoice-variation-entry-panel > .expandable-panel-header,
  .invoice-variation-entry-panel.is-on > .expandable-panel-header {
    gap: var(--space-action);
    padding-inline: var(--space-grid);
  }

  .invoice-variation-entry-panel > .expandable-panel-content {
    padding: 0 var(--space-grid) var(--space-grid);
  }

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

  .invoice-variation-row > .badge {
    justify-self: start;
  }

  .invoice-variation-row-actions {
    justify-items: start;
  }
}

.invoice-payment-summary {
  display: grid;
  align-items: baseline;
  gap: var(--space-grid);
  grid-template-columns: repeat(2, max-content);
  justify-self: end;
  margin: 0;
}

.invoice-payment-summary-header {
  grid-template-columns: max-content;
}

.invoice-payment-summary-expanded {
  grid-template-columns: max-content;
  justify-self: start;
}

.invoice-payment-summary div {
  align-items: baseline;
  display: grid;
  gap: var(--space-action);
  grid-template-columns: max-content minmax(7ch, max-content);
}

.invoice-payment-summary-expanded div {
  grid-template-columns: 1fr minmax(7ch, max-content);
}

.invoice-payment-summary dt {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
  text-transform: none;
}

.invoice-payment-summary dd {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  margin: 0;
  text-align: right;
}

.invoice-payment-form,
.invoice-credit-note-form,
.invoice-refund-form {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--space-form-group);
  padding-bottom: var(--space-form-group);
}

.invoice-payment-form label,
.invoice-payment-correction-form label,
.invoice-credit-note-form label,
.invoice-refund-form label {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.invoice-payment-history,
.invoice-adjustment-history {
  display: grid;
  gap: var(--space-form-group);
}

.invoice-payment-history > h3,
.invoice-adjustment-history > h3,
.invoice-adjustment-form-title {
  color: var(--ink);
  font-size: var(--text-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  margin: 0;
}

.invoice-refund-summary {
  display: grid;
  grid-template-columns: max-content;
  justify-self: start;
  margin: 0;
}

.invoice-refund-summary div {
  align-items: baseline;
  display: grid;
  gap: var(--space-action);
  grid-template-columns: max-content minmax(7ch, max-content);
}

.invoice-refund-summary dt {
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.invoice-refund-summary dd {
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  margin: 0;
  text-align: right;
}

.invoice-adjustment-guidance {
  margin: 0;
}

.invoice-payment-history-wrap {
  overflow-x: auto;
}

.invoice-payment-history-table {
  border-collapse: collapse;
  width: 100%;
}

.invoice-payment-history-table .invoice-history-record {
  border-bottom: 1px solid var(--line);
}

.invoice-payment-history-table .invoice-history-record > tr > td {
  border-bottom: 0;
}

.invoice-payment-history-table .invoice-history-primary-row > td {
  border-bottom: 0;
  padding-block: var(--space-field);
  white-space: nowrap;
}

.invoice-payment-history-table .invoice-history-context-row td {
  max-width: 0;
  padding-block: 0 var(--space-field);
}

.invoice-history-context-row p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-payment-history-table th,
.invoice-payment-history-table td {
  border-bottom: 1px solid var(--line);
  padding: var(--space-action) var(--space-field);
  text-align: left;
  vertical-align: middle;
}

.invoice-payment-history-table td {
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-heading);
}

.invoice-payment-history-table .numeric {
  text-align: right;
  white-space: nowrap;
}

.invoice-payment-history-table .invoice-history-user-cell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.invoice-payment-history-table .invoice-history-user {
  justify-content: center;
}

.invoice-payment-history-table .invoice-history-action-cell {
  width: 1%;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.invoice-payment-history-table .invoice-history-user-cell[rowspan],
.invoice-payment-history-table .invoice-history-centred-cell {
  vertical-align: middle;
}

.invoice-payment-correction-form {
  display: grid;
  gap: var(--space-form-group);
  margin: 0;
  min-width: 0;
}

.invoice-payment-correction-editor-row[hidden] {
  display: none;
}

.invoice-payment-correction-editor-row td {
  background: var(--surface-muted);
  padding: var(--space-form-group) var(--space-field);
}

.invoice-payment-correction-form .form-actions {
  margin: 0;
}

.invoice-payment-correction-row td {
  background: var(--surface-muted);
  padding-block: var(--space-field);
}

.confirm-dialog.invoice-cancel-dialog .dialog-actions {
  justify-content: space-between;
  width: 100%;
}

.invoice-cancel-dialog .invoice-cancel-reason-field {
  margin-top: var(--space-title-copy);
}

.invoice-create-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.invoice-create-form legend {
  margin-bottom: var(--space-field);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
}

@media (min-width: 761px) {
  .quote-edit-table .quote-dimensions-item-row .quote-price-field {
    align-items: center;
    transform: translateY(-4px);
    vertical-align: middle;
  }

  .quote-edit-table .quote-dimensions-item-row .quote-price-prefix {
    padding-top: 0;
  }

  .quote-edit-table .quote-dimensions-item-row td[data-quote-line-item-amount] .quote-compact-value {
    transform: translateY(-2px);
  }

  .quote-edit-table .quote-dimensions-item-row .remove-icon-button {
    transform: translateY(0);
  }
}

.circle-icon-button,
.remove-icon-button {
  --circle-icon-button-size: 24px;
  --circle-icon-stroke-length: 10px;
  --circle-icon-stroke-width: 2px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--circle-icon-button-size);
  min-width: var(--circle-icon-button-size);
  height: var(--circle-icon-button-size);
  min-height: var(--circle-icon-button-size);
  border-color: var(--state-critical-text);
  border-radius: var(--radius-pill);
  padding: 0;
  color: var(--state-critical-text);
  background: var(--panel);
  font-size: 0;
  line-height: 1;
  text-align: center;
}

.circle-icon-button-small {
  --circle-icon-button-size: 18px;
  --circle-icon-stroke-length: 8px;
  --circle-icon-stroke-width: 2px;
}

.circle-icon-button-medium {
  --circle-icon-button-size: 24px;
  --circle-icon-stroke-length: 10px;
  --circle-icon-stroke-width: 2px;
}

.circle-icon-button-large {
  --circle-icon-button-size: 32px;
  --circle-icon-stroke-length: 14px;
  --circle-icon-stroke-width: 3px;
}

.service-add-button.circle-icon-button {
  width: var(--size-touch-target);
  min-width: var(--size-touch-target);
  height: var(--size-touch-target);
  min-height: var(--size-touch-target);
  flex: 0 0 var(--size-touch-target);
}

.service-add-button.circle-icon-button::before,
.service-add-button.circle-icon-button::after {
  width: 13px;
  height: 3px;
}

.circle-icon-button-add {
  border-color: var(--accent);
}

.circle-icon-button-remove,
.remove-icon-button {
  border-color: var(--state-critical-text);
}

.circle-icon-button-correct {
  border-color: var(--accent);
  color: var(--accent);
}

.remove-icon-button {
  border-color: transparent;
  background: transparent;
  transform: translateY(-1px);
}

.quote-edit-table .remove-icon-button {
  transform: translateY(2px);
}

.circle-icon-button::before,
.circle-icon-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--circle-icon-stroke-length);
  height: var(--circle-icon-stroke-width);
  border-radius: var(--radius-pill);
  transform-origin: center;
}

.circle-icon-button-add::before,
.circle-icon-button-add::after {
  background: var(--accent-strong);
}

.circle-icon-button-remove::before,
.circle-icon-button-remove::after {
  background: var(--state-critical-text);
}

.circle-icon-button-add::before {
  transform: translate(-50%, -50%);
}

.circle-icon-button-add::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.circle-icon-button-remove::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.circle-icon-button-remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.circle-icon-button-correct::before {
  content: "↺";
  width: auto;
  height: auto;
  border-radius: 0;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  line-height: 1;
  transform: translate(-50%, -50%);
}

.circle-icon-button-correct::after {
  display: none;
}

.remove-bin-icon {
  display: block;
  margin-top: 0;
  width: 13px;
  height: 13px;
  background: var(--state-critical-text);
  -webkit-mask: url("/assets/bin.svg?v=2026073066") center / contain no-repeat;
  mask: url("/assets/bin.svg?v=2026073066") center / contain no-repeat;
  transform: translateY(0);
}

.circle-icon-button-add:hover,
.circle-icon-button-add:focus-visible {
  background: var(--button-secondary-hover-bg);
}

.circle-icon-button-remove:hover,
.circle-icon-button-remove:focus-visible,
.remove-icon-button:hover,
.remove-icon-button:focus-visible {
  background: var(--state-critical-bg);
}

.circle-icon-button-correct:hover,
.circle-icon-button-correct:focus-visible {
  background: var(--button-secondary-hover-bg);
}

.quote-edit-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

.totals {
  display: grid;
  justify-self: stretch;
  width: 100%;
  gap: 4px;
  margin: 16px 0;
}

.totals div {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) var(--quote-col-quantity-width) var(--quote-col-price-width)
    var(--quote-col-amount-width);
  gap: 0;
  align-items: baseline;
  line-height: var(--line-heading);
}

.totals span {
  color: var(--muted);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  grid-column: 3;
  padding-right: 8px;
  text-align: right;
}

.totals strong {
  box-sizing: border-box;
  grid-column: 4;
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  font-variant-numeric: tabular-nums;
  padding-right: 8px;
  text-align: right;
  white-space: nowrap;
}

.totals .total-row {
  border: 0;
  margin-top: 2px;
  padding: 6px 0;
  position: relative;
}

.totals .total-row::before,
.totals .total-row::after {
  content: "";
  position: absolute;
  right: 0;
  left: calc(100% - (var(--quote-col-price-width) + var(--quote-col-amount-width)));
  border-top: 1px solid var(--ink);
}

.totals .total-row::before {
  top: 0;
}

.totals .total-row::after {
  bottom: 0;
}

.totals .total-row strong {
  font-size: var(--text-content-value);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.change-request-panel {
  grid-column: 1;
  grid-row: 1;
}

.change-request-panel[open] {
  grid-column: 1 / -1;
  grid-row: 2;
}

.change-request-panel[open] > summary {
  display: none;
}

.change-request-panel form {
  display: grid;
  gap: var(--space-action);
  margin-top: var(--space-action);
}

.change-request-panel button {
  justify-self: end;
}

.quote-actions {
  display: grid;
  justify-self: end;
  width: min(var(--size-form-action-width), 100%);
  gap: var(--space-action);
  margin-top: var(--space-form-group);
}

.quote-actions .button,
.quote-actions button {
  width: 100%;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: var(--space-section);
  background: var(--overlay-backdrop);
}

.confirm-dialog {
  width: min(var(--size-dialog-max-width), 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--space-form);
  background: var(--panel);
  box-shadow: var(--shadow-dialog);
}

.confirm-dialog h2 {
  max-width: 14em;
  margin: 0 auto;
  text-align: center;
}

.confirm-dialog-body {
  white-space: pre-line;
  max-width: 24em;
  margin: var(--space-action) auto 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--line-body);
  text-align: center;
}

.confirm-dialog .inline-actions {
  justify-content: center;
}

.concurrency-dialog::backdrop {
  background: var(--overlay-backdrop);
}

.unapplied-dialog {
  width: min(560px, 100%);
}

.unapplied-dialog h2 {
  max-width: 20em;
}

.unapplied-dialog .inline-actions {
  align-items: stretch;
}

.category-dialog::backdrop {
  background: var(--overlay-backdrop);
}

.category-dialog {
  margin: auto;
}

.dialog-actions {
  justify-content: center;
}

.activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.activity-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.activity-panel .activity {
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.customer-request-panel {
  border-color: var(--state-needs-attention-border);
  background: var(--state-needs-attention-panel-bg);
}

.customer-request-panel time {
  color: var(--state-needs-attention-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
}

.customer-request-panel p {
  white-space: pre-line;
}

.lead-notes {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.lead-notes h3,
.lead-notes p {
  margin: 0;
}

.lead-notes p {
  white-space: pre-wrap;
}

.activity li {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.activity time {
  color: var(--muted);
  font-size: var(--text-sm);
}

.activity-link {
  color: var(--accent);
  font-weight: var(--weight-heading);
  text-decoration: underline;
}

.success {
  width: min(680px, 100%);
  margin: 48px auto 0;
  display: grid;
  justify-items: center;
  gap: var(--space-action);
  padding: var(--space-section);
  border-color: color-mix(in srgb, var(--quote-accent, var(--line)) 40%, var(--line));
  text-align: center;
}

.branded-success .quote-branding-logo {
  height: clamp(140px, 24vh, 220px);
  font-size: 40px;
}

.branded-success .quote-branding-logo.placeholder-logo {
  max-width: min(220px, 100%);
  width: min(220px, 100%);
}

.branded-success .quote-branding-logo.custom-logo {
  max-width: min(360px, 100%);
  width: auto;
}

.branded-success .quote-branding-logo.custom-logo img {
  height: 100%;
  object-fit: contain;
  width: auto;
}

.success h1 {
  color: var(--accent-strong);
  font-size: var(--text-h2);
  line-height: var(--line-heading);
}

.success p {
  max-width: 560px;
  margin: 0;
}

.error,
.notice {
  border-radius: var(--radius-panel);
  padding: 12px 14px;
  font-weight: var(--weight-strong);
}

.error p,
.notice p {
  margin: 0;
}

.error {
  border: 1px solid var(--critical-border);
  background: var(--critical-surface);
  color: var(--critical);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.error-actions a,
.text-link {
  color: var(--accent-strong);
  font-weight: var(--weight-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link {
  justify-self: start;
}

.field-error {
  color: var(--critical);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.notice {
  border: 1px solid var(--info-border);
  background: var(--info-surface);
  color: var(--info-text);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.text-title {
  color: var(--page-title-color);
  font-size: var(--text-page-title);
  font-weight: var(--weight-heading);
  line-height: var(--line-tight);
}

.text-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.text-lede {
  font-size: var(--text-lede);
  line-height: var(--line-body);
}

.text-label {
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
}

.quote-page .panel {
  display: grid;
  gap: var(--space-form);
}

.quote-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-form);
  margin-bottom: 12px;
}

.quote-status-left,
.quote-status-actions {
  display: flex;
  align-items: center;
  gap: var(--space-action);
}

.quote-status-left {
  min-width: 0;
}

.quote-preview-helper {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  margin: 0;
}

.quote-status-actions {
  justify-content: flex-end;
  margin-left: auto;
}

.quote-status-actions .quote-print-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent-strong);
  text-decoration: none;
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.quote-document {
  gap: var(--space-section);
}

@media screen {
  .quote-page.document-preview-page .quote-status-strip {
    box-sizing: border-box;
    inline-size: var(--document-preview-sheet-width);
    margin-inline: auto;
    max-inline-size: var(--document-preview-sheet-width);
    max-width: var(--document-preview-sheet-width);
    min-inline-size: var(--document-preview-sheet-width);
    min-width: var(--document-preview-sheet-width);
    width: var(--document-preview-sheet-width);
  }

  .quote-page.document-preview-page .quote-response-panel,
  .quote-page.document-preview-page .quote-superseded-notice {
    box-sizing: border-box;
    inline-size: var(--document-preview-sheet-width);
    margin-inline: auto;
    max-inline-size: var(--document-preview-sheet-width);
    max-width: var(--document-preview-sheet-width);
    width: var(--document-preview-sheet-width);
  }

  .quote-page.document-preview-page .panel.quote-document {
    inline-size: var(--document-preview-sheet-width);
    margin-inline: auto;
    max-inline-size: var(--document-preview-sheet-width);
    max-width: var(--document-preview-sheet-width);
    min-inline-size: var(--document-preview-sheet-width);
    min-width: var(--document-preview-sheet-width);
    padding: var(--space-form);
    width: var(--document-preview-sheet-width);
  }

  .quote-page.document-preview-page .quote-document-heading,
  .quote-page.document-preview-page .quote-document-body,
  .quote-page.document-preview-page .quote-item-section,
  .quote-page.document-preview-page .item-summary-table,
  .quote-page.document-preview-page .totals {
    box-sizing: border-box;
    inline-size: var(--document-preview-content-width);
    max-inline-size: var(--document-preview-content-width);
    max-width: var(--document-preview-content-width);
    min-inline-size: var(--document-preview-content-width);
    min-width: var(--document-preview-content-width);
    width: var(--document-preview-content-width);
  }
}

.quote-document-heading {
  display: grid;
  gap: var(--space-form);
}

.quote-document-body {
  display: grid;
  gap: 0;
}

.quote-document-body > * + * {
  margin-top: var(--space-form);
}

.quote-document-title {
  font-size: var(--text-document-title);
  line-height: var(--line-heading);
  margin-bottom: 14px;
}

.quote-title-align-left {
  text-align: left;
}

.quote-title-align-center {
  text-align: center;
}

.quote-title-align-right {
  text-align: right;
}

.quote-title-underlined {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.quote-document-meta {
  color: var(--ink);
  font-size: var(--text-quote-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-quote);
}

.quote-document-meta p {
  margin: 0;
}

.invoice-document-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-grid);
  align-items: start;
}

.invoice-document-meta-grid .quote-recipient {
  margin-bottom: 0;
}

.invoice-document-reference-details {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: var(--space-compact);
  row-gap: var(--space-quote-contact-line);
  justify-self: end;
  margin: 0;
  text-align: right;
}

.invoice-document-reference-details dt,
.invoice-document-reference-details dd {
  color: inherit;
  font: inherit;
  text-transform: none;
  white-space: nowrap;
}

.invoice-document-reference-details dt {
  text-align: right;
}

.invoice-document-reference-details dd {
  margin: 0;
  text-align: left;
}

.quote-document-body h2,
.quote-document-body p {
  margin: 0;
}

.quote-document-body h2,
.quote-document-body .quote-copy-section-title {
  color: var(--ink);
  font-size: var(--text-quote-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
}

.quote-document-body p,
.quote-document-body .quote-copy-section-body {
  color: var(--ink);
  font-size: var(--text-quote-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-quote);
}

.quote-document-body h2 + p,
.quote-document-body .quote-copy-section-title + .quote-copy-section-body {
  margin-top: var(--space-title-copy);
}

.quote-document-body p + h2,
.quote-document-body .quote-copy-section-body + .quote-copy-section-title {
  margin-top: var(--space-content-section);
}

.quote-recipient {
  display: grid;
  gap: var(--space-field);
  margin-bottom: var(--space-form);
}

.quote-recipient-address {
  color: var(--ink);
  display: grid;
  gap: var(--space-quote-contact-line);
  line-height: var(--line-quote-contact);
}

.quote-branding-header {
  border-top: 6px solid var(--quote-accent, var(--accent));
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding-top: var(--space-section);
}

.quote-branding-header-row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(150px, 225px) 1fr;
  gap: 28px;
}

.quote-branding-header.logo-right .quote-branding-header-row {
  grid-template-columns: 1fr minmax(150px, 225px);
}

.quote-branding-header.no-logo .quote-branding-header-row {
  grid-template-columns: 1fr;
}

.quote-branding-logo {
  align-items: center;
  aspect-ratio: 1;
  color: var(--quote-accent, var(--accent));
  display: flex;
  font-size: 42px;
  font-weight: 800;
  height: 225px;
  justify-content: center;
  max-width: 225px;
  width: 100%;
}

.quote-branding-logo span {
  align-items: center;
  background: color-mix(in srgb, var(--quote-accent, var(--accent)) 14%, white);
  border: 2px solid color-mix(in srgb, var(--quote-accent, var(--accent)) 28%, white);
  box-sizing: border-box;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.quote-branding-logo img {
  background: var(--panel);
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.quote-branding-logo.custom-logo {
  background: var(--panel);
}

.quote-branding-header.logo-left .quote-branding-logo {
  justify-self: start;
}

.quote-branding-header.logo-right .quote-branding-logo {
  justify-self: end;
}

.quote-branding-business-block {
  color: var(--ink);
  display: grid;
  font-family: var(--font-sans);
  font-size: var(--text-quote-copy);
  font-weight: var(--weight-content-value);
  gap: var(--space-quote-contact-line);
  line-height: var(--line-quote-contact);
}

.quote-branding-header.has-logo.logo-left .quote-branding-business-block {
  text-align: right;
}

.quote-branding-header.has-logo.logo-right .quote-branding-business-block {
  text-align: left;
}

.quote-branding-business-block p {
  margin: 0;
}

.quote-branding-business-block strong {
  color: var(--quote-accent, var(--accent));
  font-weight: 800;
}

.quote-branding-note {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-quote-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-quote);
  margin: 28px 0 0;
}

.quote-branding-header.has-logo.logo-left .quote-branding-note:not(.align-left):not(.align-center):not(.align-right) {
  text-align: right;
}

.quote-branding-header.has-logo.logo-right .quote-branding-note:not(.align-left):not(.align-center):not(.align-right) {
  text-align: left;
}

.quote-branding-note.align-left {
  text-align: left;
}

.quote-branding-note.align-center {
  text-align: center;
}

.quote-branding-note.align-right {
  text-align: right;
}

.quote-branding-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-quote-copy);
  font-weight: var(--weight-content-value);
  line-height: var(--line-quote);
  padding-top: 14px;
  white-space: normal;
}

.quote-branding-footer.align-left {
  text-align: left;
}

.quote-branding-footer.align-center {
  text-align: center;
}

.quote-branding-footer.align-right {
  text-align: right;
}

.quote-branding-footer p {
  margin: 0 0 10px;
}

.quote-branding-footer p:last-child {
  margin-bottom: 0;
}

.quote-branding-legal {
  display: grid;
  gap: var(--space-grid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  line-height: var(--line-quote);
  text-align: left;
}

.quote-branding-vat-number {
  text-align: right;
}

.quote-branding-legal span:only-child {
  grid-column: 1 / -1;
  width: 100%;
}

.quote-response-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-action);
  align-items: start;
}

.quote-response-panel .quote-publication-notice {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
}

.quote-response-panel:has(.quote-publication-notice) {
  row-gap: var(--space-form);
}

.quote-response-panel:has(.quote-publication-notice) .quote-decision-actions,
.quote-response-panel:has(.quote-publication-notice) .change-request-panel[open] + .quote-decision-actions,
.quote-response-panel:has(.quote-publication-notice) .change-request-panel {
  grid-row: 2;
}

.quote-response-panel:has(.quote-publication-notice) .change-request-panel[open] {
  grid-row: 3;
}

.quote-decision-actions {
  grid-column: 2;
  grid-row: 1;
  justify-content: end;
  margin-top: 0;
  z-index: 1;
}

.empty {
  text-align: center;
  color: var(--muted);
}

@media print {
  @page {
    size: A4;
    margin: 10mm 12mm;
  }

  :root {
    --text-body: 10.5pt;
    --text-document-title: 18pt;
    --text-h1: 16pt;
    --text-h2: 12pt;
    --text-total: 12pt;
    --space-form: 3mm;
    --space-section: 5mm;
    --print-line-height: 1.32;
    --print-address-line-height: 1.16;
    --print-paragraph-gap: 4mm;
    --print-letter-gap: 3mm;
    --print-document-height: 275mm;
    --print-totals-width: 64mm;
    --print-item-row-padding: 1.1mm 2mm;
  }

  html,
  body {
    width: 100%;
    min-height: auto;
    background: #ffffff;
  }

  body {
    color: #000000;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .skip-link,
  .topbar,
  .site-legal-footer,
  .quote-status-strip,
  .notice-panel,
  .quote-response-panel {
    display: none !important;
  }

  .public-shell.quote-page {
    display: block;
    width: 100%;
    min-height: var(--print-document-height);
    margin: 0;
  }

  .quote-page .panel,
  .quote-document {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .quote-page .quote-document {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-height: var(--print-document-height);
    padding: 0;
    background: #ffffff;
  }

  .quote-branding-header,
  .quote-document-heading,
  .quote-document-body {
    display: block;
  }

  .quote-branding-header {
    display: block;
    margin-bottom: var(--print-letter-gap);
    padding-top: 3mm;
    width: 100%;
  }

  .quote-branding-header-row {
    display: table;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
  }

  .quote-branding-header.no-logo {
    display: block;
  }

  .quote-branding-header.no-logo .quote-branding-header-row {
    display: block;
  }

  .quote-branding-header.no-logo .quote-branding-business-block {
    display: block;
    width: 100%;
  }

  .quote-branding-logo {
    display: table-cell;
    height: 36mm;
    line-height: 36mm;
    max-width: 36mm;
    text-align: center;
    vertical-align: middle;
    width: 36mm;
  }

  .quote-branding-logo span {
    display: inline-flex;
    height: 36mm;
    line-height: normal;
    vertical-align: middle;
    width: 36mm;
  }

  .quote-branding-logo.custom-logo {
    background: #fff;
  }

  .quote-branding-logo.custom-logo img {
    background: #fff;
    display: inline-block;
    height: auto;
    max-height: 36mm;
    max-width: 36mm;
    vertical-align: middle;
    width: auto;
  }

  .quote-branding-business-block {
    box-sizing: border-box;
    display: table-cell;
    max-width: none;
    min-width: 0;
    vertical-align: middle;
    width: auto;
  }

  .quote-branding-header.has-logo.logo-left .quote-branding-business-block {
    text-align: right;
  }

  .quote-branding-header.has-logo.logo-right .quote-branding-business-block {
    text-align: left;
  }

  .quote-branding-note {
    margin-top: 0;
    padding-top: 2mm;
  }

  .quote-document-heading {
    margin-bottom: 2mm;
  }

  .quote-document-title {
    margin-bottom: var(--print-letter-gap);
  }

  .quote-recipient {
    gap: 1.5mm;
    margin-bottom: var(--print-letter-gap);
  }

  .quote-document-body > * + * {
    margin-top: var(--print-paragraph-gap);
  }

  .quote-document-meta {
    line-height: var(--print-line-height);
  }

  .invoice-document-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--print-letter-gap);
    align-items: start;
  }

  .invoice-document-meta-grid .quote-recipient {
    margin-bottom: 0;
  }

  .invoice-document-reference-details {
    text-align: right;
  }

  .quote-branding-business-block,
  .quote-recipient-address {
    line-height: var(--print-address-line-height);
  }

  .quote-document-body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .quote-document-body p {
    line-height: var(--print-line-height);
  }

  .quote-branding-footer {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 4mm;
    padding-bottom: 0;
  }

  .quote-branding-footer p {
    margin-bottom: 3mm;
  }

  .quote-branding-legal {
    display: table;
    border-spacing: 0;
    line-height: var(--print-address-line-height);
    table-layout: fixed;
    width: 100%;
  }

  .quote-branding-legal span {
    display: table-cell;
    width: 50%;
  }

  .quote-branding-legal span:only-child {
    display: block;
    width: 100%;
  }

  .quote-branding-company-number {
    text-align: left;
  }

  .quote-branding-vat-number {
    text-align: right;
  }

  .totals {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    gap: 0.25mm;
    margin: 4mm 0;
  }

  .totals div {
    grid-template-columns:
      minmax(0, 1fr) 4rem var(--quote-col-price-width)
      var(--quote-col-amount-width);
    gap: 0;
  }

  .totals span {
    grid-column: 3;
    padding: 0.25mm 2mm;
    padding-left: 0;
    text-align: right;
  }

  .totals strong {
    box-sizing: border-box;
    grid-column: 4;
    padding: 0.25mm 2mm;
    text-align: right;
  }

  .totals .total-row {
    position: relative;
    border: 0;
    margin-top: 0.5mm;
    padding: 0.5mm 0;
  }

  .totals .total-row::before,
  .totals .total-row::after {
    content: "";
    position: absolute;
    right: 0;
    left: calc(100% - (var(--quote-col-price-width) + var(--quote-col-amount-width)));
    border-top: 1px solid var(--ink);
  }

  .totals .total-row::before {
    top: 0;
  }

  .totals .total-row::after {
    bottom: 0;
  }

  .invoice-comparison-totals div {
    grid-template-columns:
      minmax(0, 1fr) var(--invoice-comparison-quantity-width)
      var(--invoice-comparison-price-width) var(--invoice-comparison-vat-width)
      var(--invoice-comparison-amount-width) var(--invoice-comparison-amount-width);
  }

  .invoice-comparison-totals span {
    grid-column: 5;
  }

  .invoice-comparison-totals strong {
    grid-column: 6;
  }

  .invoice-comparison-totals .invoice-comparison-summary-row .invoice-comparison-total-label {
    grid-column: 4;
    grid-row: 1;
  }

  .invoice-comparison-totals .invoice-comparison-summary-row .invoice-quoted-total-value {
    grid-column: 5;
    grid-row: 1;
    font-weight: var(--weight-body);
  }

  .invoice-comparison-totals .invoice-comparison-summary-row .invoice-current-total-value {
    grid-column: 6;
    grid-row: 1;
  }

  .quote-page.document-preview-page .financial-document-scroll,
  .quote-page.document-preview-page .financial-document-canvas,
  .quote-page.document-preview-page .quote-item-section,
  .quote-page.document-preview-page .item-summary-table,
  .quote-page.document-preview-page .totals {
    box-sizing: border-box;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .quote-page.document-preview-page .financial-document-scroll {
    overflow: visible;
  }

  .invoice-comparison-totals .invoice-comparison-summary-row span.invoice-current-total-value {
    font-weight: var(--weight-body);
  }

  .invoice-comparison-totals .total-row::before,
  .invoice-comparison-totals .total-row::after {
    left: calc(
      100% -
        (
          var(--invoice-comparison-vat-width) + var(--invoice-comparison-amount-width) +
            var(--invoice-comparison-amount-width)
        )
    );
  }

  .quote-line-total-summary {
    justify-self: stretch;
    width: 100%;
  }

  .quote-line-total-summary div {
    grid-template-columns:
      minmax(0, 1fr) 4rem var(--quote-col-price-width)
      var(--quote-col-amount-width);
    gap: 0;
  }

  .quote-line-total-summary span {
    grid-column: 3;
    padding: 0.5mm 2mm;
    padding-left: 0;
    text-align: right;
  }

  .quote-line-total-summary strong {
    box-sizing: border-box;
    font-weight: var(--weight-body);
    grid-column: 4;
    padding: 0.5mm 2mm;
    text-align: right;
  }

  .quote-item-section,
  .item-summary-table {
    align-self: stretch;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 100%;
    width: 100%;
  }

  .quote-phase-heading,
  .quote-phase-totals,
  .invoice-payment-details {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .quote-phase-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  [data-financial-document-page-break-before] {
    break-before: page;
    page-break-before: always;
  }

  [data-financial-document-pagination-source] {
    display: none !important;
  }

  [data-financial-document-running-frame] .quote-branding-legal {
    display: none;
  }

  [data-financial-document-running-frame].quote-document {
    background: transparent;
  }

  [data-financial-document-running-frame] .quote-document-body,
  [data-financial-document-running-frame] .financial-document-scroll,
  [data-financial-document-running-frame] .financial-document-canvas {
    background: transparent;
  }

  [data-financial-document-running-frame] .quote-branding-footer:not(:has(p)) {
    display: none;
  }

  .quote-phase-totals div {
    grid-template-columns:
      minmax(0, 1fr) 4rem var(--quote-col-price-width)
      var(--quote-col-amount-width);
  }

  .quote-phase-totals span,
  .quote-phase-totals strong {
    padding: 0.25mm 2mm;
  }

  .quote-phase-totals span {
    padding-left: 0;
  }

  .item-summary-table {
    display: table;
    table-layout: fixed;
  }

  .item-summary-table thead {
    display: table-header-group;
  }

  .item-summary-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .item-summary-table tbody tr:last-child,
  .item-summary-table .quote-room-row,
  .item-summary-table .quote-edit-room-row,
  .item-summary-table .quote-category-row {
    break-after: avoid;
    page-break-after: avoid;
  }

  .item-summary-table th,
  .item-summary-table td {
    padding: var(--print-item-row-padding);
  }

  .item-summary-table:not(.quote-edit-table)
    tbody
    tr:not(.quote-room-row):not(.quote-edit-room-row):not(.quote-category-row)
    td {
    line-height: 1.15;
    padding-bottom: 0.75mm;
    padding-top: 0.75mm;
  }

  .quote-branding-header {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .quote-document-heading,
  .quote-recipient,
  .totals,
  .quote-branding-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .quote-document-body h2 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .quote-group,
  .quote-line-item,
  .totals-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }

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

@media (max-width: 1028px) {
  .services-wizard-paths {
    grid-template-columns: var(--wizard-choice-card-width);
  }
}

@media (max-width: 1180px) {
  .detail-grid {
    --quote-col-quantity-width: 6rem;
    --quote-col-price-width: 5.75rem;
    --quote-col-amount-width: 5.75rem;
    grid-template-columns: 1fr;
  }

  .quote-add-item-grid,
  .quote-add-item.is-add-dimensions .quote-add-item-grid,
  .quote-add-item.is-add-fixed-price .quote-add-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-add-room-field {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .quote-add-room-dimensions {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
  }

  .quote-add-category-field {
    grid-column: 1;
    grid-row: 3;
  }

  .quote-add-service-field,
  .quote-add-item.is-add-dimensions .quote-add-service-field,
  .quote-add-item.is-add-fixed-price .quote-add-service-field {
    grid-column: 2;
    grid-row: 3;
  }

  .quote-add-quantity-field {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .quote-add-item-grid [data-quote-add-dimensions] label:first-child {
    grid-column: 1;
    grid-row: 4;
  }

  .quote-add-item-grid [data-quote-add-dimensions] label:last-child {
    grid-column: 2;
    grid-row: 4;
  }

  .quote-add-item-grid [data-quote-add-dimensions] label:first-child,
  .quote-add-item-grid [data-quote-add-dimensions] label:last-child {
    justify-self: stretch;
    max-width: none;
    width: 100%;
  }

  .quote-add-item-grid label,
  .quote-add-item-grid select,
  .quote-add-item-grid input,
  .quote-add-quantity-field,
  .quote-add-room-dimensions label,
  .quote-add-item-grid [data-quote-add-dimensions] label {
    justify-self: stretch;
    max-width: none;
    width: 100%;
  }

  .quote-add-item .quantity-input {
    max-width: none;
    width: 100%;
  }

  .activity-panel,
  .activity-panel .activity {
    overflow: visible;
  }

  .activity-panel .activity {
    padding-right: 0;
  }
}

@media (max-width: 980px) {
  .services-wizard-trade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-wizard-groups,
  .services-wizard-custom-form {
    grid-template-columns: 1fr;
  }

  .services-wizard-path {
    aspect-ratio: auto;
    min-height: var(--wizard-choice-card-min-height);
  }

  .service-setup-grid {
    grid-template-columns: 1fr;
  }

  .custom-services-step-guidance-templates {
    order: 1;
  }

  .custom-services-setup-grid > .starter-services-panel {
    order: 2;
  }

  .custom-services-step-guidance-editor {
    order: 3;
  }

  .custom-services-setup-grid > .service-editor-column {
    order: 4;
  }
}

@media (max-width: 640px) {
  .portal-search,
  .portal-search-form {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-search {
    position: relative;
  }

  .portal-search-type {
    flex: 0 0 auto;
    width: 100%;
  }

  .portal-search.has-active-search .portal-search-field {
    flex: 0 0 auto;
    width: calc(100% - var(--size-portal-search-control) - var(--space-action));
  }

  .portal-search-clear {
    position: absolute;
    right: var(--space-action);
    bottom: var(--space-action);
  }
}

@media (max-width: 820px) {
  .leads-table,
  .leads-table tbody,
  .leads-table tr,
  .leads-table td {
    display: block;
  }

  .leads-table thead {
    display: none;
  }

  .leads-table .lead-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(
        var(--job-board-compact-postcode-width) + var(--job-board-compact-status-width) + var(--space-field)
      );
    gap: var(--space-field);
    border-bottom: 1px solid var(--line);
    padding: var(--space-action) 0;
  }

  .leads-table .lead-customer-cell {
    grid-column: 1;
    grid-row: 1;
  }

  .leads-table .lead-postcode-cell {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .leads-table .lead-status-cell {
    display: none;
  }

  .leads-table .lead-status-cell::before {
    content: "";
    display: none;
  }

  .leads-table .lead-job-cell {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .leads-table .lead-income-cell,
  .leads-table .lead-updated-cell,
  .leads-table .lead-email-cell {
    display: none;
  }

  .leads-table .lead-postcode-cell::before {
    display: none;
  }

  .leads-table .lead-postcode-compact-header {
    position: relative;
    display: block;
    margin-top: 0;
    margin-bottom: var(--space-field);
  }

  .leads-table .lead-postcode-compact-header > span {
    display: block;
    width: var(--job-board-compact-postcode-width);
    margin-top: 0;
    color: var(--ink);
    font-size: var(--text-content-label);
    font-weight: var(--weight-content-label);
    line-height: var(--line-heading);
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }

  .leads-table .lead-postcode-cell > .row-link {
    width: var(--job-board-compact-postcode-width);
    text-align: center;
  }

  .leads-table .lead-compact-status {
    position: absolute;
    top: 50%;
    right: 0;
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-50%);
  }

  .leads-table .lead-compact-status .badge {
    margin-top: 0;
    transform: none;
    text-transform: none;
    white-space: nowrap;
  }

  .leads-table .lead-row:first-child {
    padding-top: 0;
  }

  .leads-table td {
    border-bottom: 0;
    min-width: 0;
    padding: 0;
  }

  .leads-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-field);
    color: var(--ink);
    font-size: var(--text-content-label);
    font-weight: var(--weight-content-label);
    line-height: var(--line-heading);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .leads-table .lead-row .row-link {
    min-height: 0;
    padding: 0;
  }

  .leads-table .empty {
    border-bottom: 0;
    padding: 14px 0;
  }

  .leads-table .empty::before {
    content: "";
    display: none;
  }
}

/* Job request cards */
.job-board-cards {
  display: grid;
  gap: var(--space-grid);
}

.lead-card {
  --lead-card-status-color: var(--state-excellent-text);
  --lead-card-status-shadow-soft: color-mix(in srgb, var(--lead-card-status-color) 25%, transparent);
  --lead-card-status-shadow-strong: color-mix(in srgb, var(--lead-card-status-color) 32%, transparent);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
  gap: var(--space-grid);
  height: var(--job-board-card-height);
  min-height: var(--job-board-card-height);
  max-height: var(--job-board-card-height);
  overflow: hidden;
  padding: var(--space-panel);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow:
    0 2px 10px var(--lead-card-status-shadow-soft),
    0 4px 4px var(--lead-card-status-shadow-strong);
  cursor: pointer;
  position: relative;
}

.presence-stack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.presence-stack[hidden] {
  display: none;
}

.presence-avatar {
  --presence-avatar-size: 24px;
  display: inline-flex;
  width: var(--presence-avatar-size);
  height: var(--presence-avatar-size);
  flex: 0 0 var(--presence-avatar-size);
  align-items: center;
  justify-content: center;
  padding-block-start: 1px;
  margin-left: -7px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: 0.01em;
}

.presence-avatar:first-child {
  margin-left: 0;
}

.presence-avatar-with-name {
  position: relative;
  display: inline-flex;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1;
}

.presence-avatar-trigger {
  width: var(--presence-avatar-size);
  min-width: var(--presence-avatar-size);
  max-width: var(--presence-avatar-size);
  height: var(--presence-avatar-size);
  min-height: var(--presence-avatar-size);
  max-height: var(--presence-avatar-size);
  aspect-ratio: 1;
  padding-inline: 0;
  appearance: none;
  font-family: inherit;
  cursor: help;
}

.presence-avatar-trigger > span {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: 1;
}

.presence-avatar-name {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + var(--space-compact));
  left: 50%;
  display: block;
  margin: 0;
  padding: var(--space-field) var(--space-action);
  border-radius: var(--radius-panel);
  background: var(--ink);
  box-shadow: var(--shadow-popover);
  color: var(--panel);
  font-size: var(--text-sm);
  font-weight: var(--weight-content-value);
  line-height: var(--line-heading);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--space-field));
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  white-space: nowrap;
}

.presence-avatar-with-name:hover .presence-avatar-name,
.presence-avatar-with-name:focus-within .presence-avatar-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.presence-avatar-tone-1 {
  background: var(--state-excellent-bg);
  color: var(--state-excellent-text);
}

.presence-avatar-tone-2 {
  background: var(--state-good-bg);
  color: var(--state-good-text);
}

.presence-avatar-tone-3 {
  background: var(--state-stable-bg);
  color: var(--state-stable-text);
}

.presence-avatar-tone-4 {
  background: var(--state-needs-attention-bg);
  color: var(--state-needs-attention-text);
}

.presence-more {
  margin-left: var(--space-title-copy);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

.lead-card-presence {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.lead-card-presence .presence-more {
  display: none;
}

.lead-heading-actions {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  justify-self: end;
  gap: var(--space-action);
}

.lead-detail-presence {
  margin-bottom: auto;
  justify-content: flex-end;
}

.lead-card.lead-row-changes-requested {
  --lead-card-status-color: var(--state-needs-attention-text);
}

.lead-card.lead-row-cancelled {
  --lead-card-status-color: var(--state-critical-text);
}

.lead-card.lead-row-completed {
  --lead-card-status-color: var(--state-good-text);
}

.lead-card.lead-row-stable {
  --lead-card-status-color: var(--state-stable-text);
}

.lead-card.lead-row-needs-attention {
  --lead-card-status-color: var(--state-needs-attention-text);
}

.lead-card:nth-child(even),
.lead-card:hover {
  background: var(--panel);
}

.lead-card:hover {
  box-shadow:
    0 2px 10px var(--lead-card-status-shadow-soft),
    0 4px 4px var(--lead-card-status-shadow-strong);
}

.lead-card:focus-visible {
  border-radius: var(--radius-panel);
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.lead-card-block,
.lead-card-block > div {
  min-width: 0;
}

.lead-card-block h2 {
  margin: 0 0 var(--space-title-copy);
  color: var(--ink);
  font-size: var(--text-content-label);
  font-weight: var(--weight-content-label);
  line-height: var(--line-heading);
}

.lead-card-block span:not(.badge) {
  color: var(--ink);
  font-size: var(--text-content-value);
  font-weight: var(--weight-content-value);
  line-height: var(--line-body);
}

.lead-customer-cell > div,
.lead-job-cell > div {
  display: grid;
}

.lead-job-cell > div {
  grid-template-columns: minmax(0, 1fr);
}

.lead-card-primary {
  font-weight: var(--weight-content-value);
}

.invoice-register-page .lead-card-financial-summary,
.job-invoice-list .lead-card-financial-summary {
  font-weight: var(--weight-content-label);
}

.lead-card-address {
  display: block;
}

.lead-card-truncate,
.lead-card-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-more {
  color: var(--muted) !important;
}

.lead-contact-cell,
.lead-meta-cell {
  position: relative;
  display: grid;
  align-content: start;
}

.lead-contact-cell > :nth-child(2),
.lead-meta-cell > :nth-child(2) {
  position: absolute;
  top: calc(var(--space-grid) + var(--space-title-copy) + (2 * var(--space-form)));
  right: 0;
  left: 0;
}

.lead-contact-cell {
  min-width: 0;
}

.lead-meta-cell {
  width: var(--job-board-meta-width);
  min-width: max-content;
}

.lead-meta-cell h2,
.lead-meta-cell span {
  white-space: nowrap;
}

.lead-meta-cell > :nth-child(2) {
  right: 0;
  left: auto;
  width: max-content;
}

.lead-card-status {
  display: grid;
  gap: calc(var(--space-title-copy) / 2);
  grid-template-columns: max-content;
  justify-items: end;
  justify-self: end;
}

.lead-card-status .badge {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .lead-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
    padding: var(--space-grid);
  }

  .lead-card .lead-contact-cell {
    display: none;
  }

  .lead-card .lead-meta-cell {
    width: max-content;
  }

  .lead-customer-cell > div {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .lead-customer-cell .lead-card-primary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .lead-customer-cell .lead-card-address {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .lead-customer-cell .lead-card-postcode {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* The breakpoint switches between two independent job-board presentations. */
@media (max-width: 820px) {
  .job-board-desktop-view {
    display: none;
  }

  .job-board-compact-view {
    display: block;
  }

  .job-board-compact-table,
  .job-board-compact-table tbody {
    display: block;
    width: 100%;
  }

  .job-board-compact-table.leads-table .lead-row {
    display: grid;
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr) calc(
        var(--job-board-compact-postcode-width) + var(--job-board-compact-status-width) + var(--space-field)
      );
    gap: var(--space-field);
    padding: var(--space-action) 0;
  }

  .job-board-compact-table.leads-table .lead-row td {
    display: block;
    min-width: 0;
    border-bottom: 0;
    padding: 0;
    color: var(--ink);
    font-size: var(--text-content-value);
    font-weight: var(--weight-content-value);
    line-height: var(--line-body);
  }

  .job-board-compact-table.leads-table .lead-row td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-title-copy);
    color: var(--ink);
    font-size: var(--text-content-label);
    font-weight: var(--weight-content-label);
    line-height: var(--line-heading);
    text-transform: none;
  }

  .job-board-compact-table.leads-table .lead-row .row-link {
    min-height: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  .job-board-compact-table.leads-table .lead-customer-cell strong {
    font: inherit;
  }

  .job-board-compact-table.leads-table .lead-customer-cell {
    grid-area: auto;
    grid-column: 1;
    grid-row: 1;
  }

  .job-board-compact-table.leads-table .lead-postcode-cell {
    grid-area: auto;
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .job-board-compact-table.leads-table .lead-job-cell {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .job-board-compact-table.leads-table .lead-row td.lead-email-cell,
  .job-board-compact-table.leads-table .lead-row td.lead-income-cell,
  .job-board-compact-table.leads-table .lead-row td.lead-status-cell,
  .job-board-compact-table.leads-table .lead-row td.lead-updated-cell {
    display: none;
    grid-area: auto;
  }

  .job-board-compact-table.leads-table .lead-row td.lead-postcode-cell::before,
  .job-board-compact-table.leads-table .lead-row td.lead-status-cell::before {
    content: "";
    display: none;
  }

  .job-board-compact-table.leads-table .lead-postcode-compact-header {
    position: relative;
    display: block;
    margin-top: 0;
    margin-bottom: var(--space-title-copy);
  }

  .job-board-compact-table.leads-table .lead-postcode-compact-header > span {
    display: block;
    width: var(--job-board-compact-postcode-width);
    margin-top: 0;
    color: var(--ink);
    font-size: var(--text-content-label);
    font-weight: var(--weight-content-label);
    line-height: var(--line-heading);
    text-align: center;
    text-transform: none;
  }

  .job-board-compact-table.leads-table .lead-postcode-cell > .row-link {
    width: var(--job-board-compact-postcode-width);
    text-align: center;
  }

  .job-board-compact-table.leads-table .lead-compact-status {
    position: absolute;
    top: 50%;
    right: 0;
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-50%);
  }

  .job-board-compact-table.leads-table .lead-compact-status .badge {
    margin-top: 0;
    transform: none;
    text-transform: none;
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  .service-catalogue-table,
  .service-catalogue-table tbody,
  .service-catalogue-table tr,
  .service-catalogue-table td {
    display: table;
  }

  .service-catalogue-table thead {
    display: table-header-group;
  }

  .service-catalogue-table tbody {
    display: table-row-group;
  }

  .service-catalogue-table tr {
    display: table-row;
  }

  .service-catalogue-table th,
  .service-catalogue-table td {
    display: table-cell;
  }

  .service-catalogue-table .lead-row {
    display: table-row;
    border-bottom: 0;
    padding: 0;
  }

  .service-catalogue-table .lead-row:first-child {
    padding-top: 0;
  }

  .service-catalogue-table td {
    border-bottom: 1px solid var(--line);
  }

  .service-catalogue-table td::before {
    content: "";
    display: none;
  }
}

@media (max-width: 520px) {
  .team-members-table .table-actions {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--space-action);
  }

  .team-members-table .team-member-save-actions {
    display: contents;
  }

  .team-members-table .table-actions button,
  .team-members-table .team-member-save-actions button {
    min-width: 0;
    padding-inline: var(--space-grid);
    width: auto;
  }

  .team-members-table .team-member-save-actions .button-utility {
    grid-column: 2;
    justify-self: end;
  }

  .team-members-table .team-member-save-actions .button-primary {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 820px) {
  .services-wizard-price-heading {
    display: none;
  }

  .services-wizard-price-row-main,
  .services-wizard-price-row {
    grid-template-columns: 1fr;
  }

  .services-wizard-price-trade-header {
    align-items: start;
    flex-direction: column;
  }

  .services-wizard-mobile-field-label {
    display: block;
  }

  .services-wizard-unit-cell:has(.services-wizard-unit-placeholder:not([hidden])) {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --text-page-title: 1.9rem;
    --text-title: 2.75rem;
    --text-lede: 1rem;
  }

  .services-wizard-paths {
    grid-template-columns: minmax(0, 1fr);
  }

  .services-wizard-trade-grid {
    grid-template-columns: 1fr;
  }

  .services-wizard-trade-card-surface {
    min-height: var(--wizard-trade-card-min-height-compact);
  }

  .app-shell,
  .public-shell,
  .site-shell,
  .onboarding-page {
    width: min(100% - 24px, 1120px);
    margin: 20px auto 48px;
  }

  .quote-item-table-scroll {
    min-width: 0;
    overflow-x: visible;
    width: 100%;
  }

  .quote-grouped-summary-table {
    display: table;
    max-width: none;
    overflow: visible;
    table-layout: fixed;
    width: 100%;
  }

  .auth-shell {
    width: min(100% - 24px, 480px);
    margin: 24px auto 48px;
  }

  .panel {
    padding: 16px;
  }

  .onboarding-progress ol {
    grid-template-columns: 1fr;
  }

  .services-wizard-path .surface-card-surface {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    padding: var(--space-field);
  }

  .services-wizard-path {
    --surface-card-copy-title-height: 6.4rem;
    --surface-card-copy-text-height: 4.4rem;
    min-height: var(--wizard-choice-card-min-height-compact);
  }

  .services-wizard-path .surface-card-pill,
  .services-wizard-path .surface-card-icon,
  .services-wizard-path .surface-card-copy,
  .services-wizard-path .surface-card-action-cue {
    position: static;
  }

  .services-wizard-path .surface-card-pill {
    grid-column: 1 / -1;
  }

  .services-wizard-path .surface-card-icon {
    grid-column: 2;
    grid-row: 2;
    width: var(--wizard-choice-card-icon-size-compact);
    height: var(--wizard-choice-card-icon-size-compact);
    align-self: start;
    margin-right: 0;
    transform: translateY(-2px);
  }

  .services-wizard-path .surface-card-icon svg {
    width: var(--wizard-choice-card-icon-glyph-size-compact);
    height: var(--wizard-choice-card-icon-glyph-size-compact);
  }

  .services-wizard-choice-icon {
    width: var(--wizard-category-mark-size);
    height: var(--wizard-category-mark-size);
  }

  .services-wizard-path .surface-card-copy {
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: end;
    max-width: none;
  }

  .services-wizard-path .surface-card-copy strong {
    font-size: 2rem;
  }

  .services-wizard-path .surface-card-action-cue {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    margin-top: 0;
  }

  .topbar {
    height: auto;
    padding: 14px calc(16px + env(safe-area-inset-right)) 14px calc(16px + env(safe-area-inset-left));
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar nav {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .marketing-topbar {
    display: flex;
  }

  .marketing-nav {
    display: flex;
    flex: 1 1 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .marketing-nav-links,
  .marketing-nav-actions {
    flex-wrap: wrap;
  }

  .topbar.frosted-navigation-topbar[data-app-navigation-compact]
    .app-navigation[data-app-navigation-right-layout="compress"] {
    flex-wrap: wrap;
  }

  .topbar.frosted-navigation-topbar[data-app-navigation-compact]
    .app-navigation[data-app-navigation-right-layout="compress"]
    .app-navigation-list {
    flex: 1 1 100%;
    justify-content: center;
  }

  .topbar.frosted-navigation-topbar[data-app-navigation-compact]
    .app-navigation[data-app-navigation-right-layout="compress"]
    .app-navigation-logout {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 0;
  }

  .lead-tab-column {
    overflow: hidden;
  }

  .tab-nav {
    flex-wrap: nowrap;
    margin-inline: -12px;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 12px;
    padding-right: 34px;
    scrollbar-width: thin;
    scroll-padding-inline: 12px 34px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  }

  .tab-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .panel-tabs {
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .hero,
  .page-heading {
    display: grid;
    align-items: start;
  }

  .detail-grid > .page-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-card-presence {
    top: -2px;
  }

  .lead-card-presence .presence-avatar {
    --presence-avatar-size: 18px;
    margin-left: -5px;
    font-size: 0.48rem;
  }

  .hero {
    padding: 22px;
    min-height: auto;
  }

  .field-grid,
  .settings-grid,
  .management-grid,
  .stats,
  .facts,
  .site-hero,
  .site-workflow,
  .site-band,
  .pricing-grid,
  .pricing-includes,
  .pricing-includes-list {
    grid-template-columns: 1fr;
  }

  .pricing-card > p {
    min-height: 0;
  }

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

  .account-access-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-positive-actions {
    align-items: stretch;
    order: 1;
    width: 100%;
  }

  .invoice-positive-actions button,
  .invoice-positive-actions > a {
    width: 100%;
  }

  .invoice-cancel-actions {
    order: 2;
    width: 100%;
  }

  .invoice-cancel-actions button {
    width: 100%;
  }

  .expandable-panel.has-header-content .expandable-panel-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .invoice-payments.expandable-panel.has-header-content .expandable-panel-header {
    grid-template-columns: max-content minmax(var(--space-action), 1fr) max-content;
  }

  .invoice-payment-summary-expanded {
    grid-template-columns: max-content;
    justify-self: start;
  }

  .invoice-payment-summary-header {
    justify-self: end;
  }

  .quote-branding-legal {
    grid-template-columns: 1fr;
  }

  .quote-branding-vat-number {
    text-align: left;
  }

  .quote-status-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .quote-status-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .invoice-document-meta-grid {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--space-grid);
  }

  .invoice-document-reference-details {
    text-align: right;
  }

  .quote-response-panel,
  .change-request-panel {
    grid-template-columns: 1fr;
  }

  .quote-response-panel {
    min-width: 0;
    width: 100%;
  }

  .change-request-panel > summary {
    width: 100%;
  }

  .quote-decision-actions {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .quote-decision-actions button {
    width: 100%;
  }

  .change-request-panel[open] + .quote-decision-actions {
    grid-row: 1;
  }

  .change-request-panel form {
    grid-column: 1;
  }

  .change-request-panel button {
    justify-self: start;
  }

  .quote-branding-header-row,
  .quote-branding-header.logo-right .quote-branding-header-row {
    grid-template-columns: 1fr;
  }

  .quote-branding-header.logo-left .quote-branding-logo,
  .quote-branding-header.logo-right .quote-branding-logo {
    height: 140px;
    justify-self: start;
    max-width: 140px;
    order: -1;
  }

  .quote-branding-header.has-logo.logo-left .quote-branding-business-block,
  .quote-branding-header.has-logo.logo-right .quote-branding-business-block {
    text-align: left;
  }

  .enquiry-branding-hero .quote-branding-header-row {
    gap: var(--space-action);
    grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
  }

  .enquiry-branding-hero .quote-branding-header.logo-right .quote-branding-header-row {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 140px);
  }

  .enquiry-branding-hero .quote-branding-header.no-logo .quote-branding-header-row {
    grid-template-columns: 1fr;
  }

  .enquiry-branding-hero .quote-branding-header.has-logo.logo-left .quote-branding-business-block {
    text-align: right;
  }

  .enquiry-branding-hero .quote-branding-header.has-logo.logo-right .quote-branding-business-block {
    text-align: left;
  }

  .quote-edit-table thead {
    display: none;
  }

  .quote-edit-table,
  .quote-edit-table tbody,
  .quote-edit-table tr {
    box-sizing: border-box;
    width: 100%;
  }

  .quote-edit-table {
    display: block;
    overflow: visible;
  }

  .quote-phase-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-edit-table tbody,
  .quote-edit-table td {
    display: block;
  }

  .quote-edit-table tr {
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(6.25rem, 1fr) minmax(5.5rem, 1fr) minmax(5.5rem, 1fr) 2rem;
    gap: var(--space-compact);
    padding: 14px 0;
  }

  .quote-edit-table tr:has(.quote-phase-cell) {
    grid-template-columns:
      minmax(4rem, 0.65fr) minmax(5rem, 0.9fr) minmax(5.25rem, 1fr) minmax(5rem, 1fr)
      2rem;
  }

  .quote-edit-table tr.is-removed {
    display: none;
  }

  .quote-edit-table tr > th,
  .quote-edit-table tr > td:first-child {
    grid-column: 1 / -1;
  }

  .quote-edit-table td {
    border-bottom: 0;
    padding: 0;
  }

  .quote-edit-table td::before {
    content: attr(data-label);
    color: var(--ink);
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-heading);
    line-height: var(--line-heading);
    margin-bottom: 4px;
    text-transform: uppercase;
  }

  .quote-edit-table [data-quote-quantity-column] {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-areas: "label label" "input unit";
    grid-template-columns: auto auto;
    column-gap: var(--space-compact);
    justify-content: start;
  }

  .quote-edit-table .quote-phase-cell {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    text-align: left;
  }

  .quote-edit-table .quote-phase-cell select {
    min-width: 0;
    width: 4rem;
  }

  .quote-edit-table tr:has(.quote-phase-cell) [data-quote-quantity-column] {
    grid-column: 2;
  }

  .quote-edit-table [data-quote-quantity-column]::before {
    grid-area: label;
    text-align: left;
  }

  .quote-edit-table [data-quote-quantity-column] .quantity-input {
    grid-area: input;
  }

  .quote-edit-table .quote-mobile-unit {
    align-self: start;
    color: var(--muted);
    display: inline;
    font-size: var(--text-xs);
    font-weight: var(--weight-heading);
    grid-area: unit;
    white-space: nowrap;
  }

  .quote-edit-table .quote-mobile-unit:empty {
    display: none;
  }

  .quote-edit-table .quote-unit-cell {
    display: none;
  }

  .quote-edit-table td[data-quote-detail-column]:not([data-quote-quantity-column]),
  .quote-edit-table td[data-quote-line-item-amount] {
    text-align: right;
  }

  .quote-edit-table td[data-quote-detail-column]:not([data-quote-quantity-column]) {
    grid-column: 2;
    grid-row: 2;
  }

  .quote-edit-table tr:has(.quote-phase-cell) td[data-quote-detail-column]:not([data-quote-quantity-column]) {
    grid-column: 3;
  }

  .quote-edit-table td[data-quote-line-item-amount] {
    grid-column: 3;
    grid-row: 2;
  }

  .quote-edit-table tr:has(.quote-phase-cell) td[data-quote-line-item-amount] {
    grid-column: 4;
  }

  .quote-edit-table .quote-compact-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 30px;
  }

  .quote-edit-table .quote-dimensions-item-row td[data-quote-line-item-amount] .quote-compact-value {
    padding-top: 4px;
  }

  .quote-edit-table .quote-remove-cell {
    align-self: end;
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    text-align: right;
  }

  .quote-edit-table tr:has(.quote-phase-cell) .quote-remove-cell {
    grid-column: 5;
  }

  .quote-edit-table .quote-remove-cell::before {
    display: none;
  }

  .quote-edit-table .remove-icon-button {
    transform: translateY(-3px);
  }

  .quote-edit-table th:last-child,
  .quote-edit-table td:last-child {
    text-align: left;
  }

  .site-hero {
    min-height: auto;
    gap: 24px;
  }

  .product-story-header,
  .product-story-slide {
    grid-template-columns: 1fr;
  }

  .product-story-slide {
    gap: 18px;
    padding: 18px;
  }

  .product-story-copy h3 {
    font-size: var(--text-h2);
  }

  .story-quote-preview {
    min-height: 360px;
  }

  .story-quote-preview img {
    max-height: 460px;
  }

  .story-mock-row,
  .story-mock-table div,
  .story-history-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .story-mock-row span,
  .story-mock-table span,
  .story-history-row .story-status-pill {
    text-align: left;
  }

  .site-copy h1 {
    font-size: 2.5rem;
  }

  .pricing-hero h1 {
    font-size: 2.25rem;
  }

  .pricing-page {
    margin-top: 0;
  }

  .pricing-hero-inner {
    min-height: auto;
    margin: 0 auto;
    padding-top: 46px;
    padding-bottom: 108px;
  }

  .pricing-shell {
    margin-top: 48px;
  }

  .pricing-card {
    min-height: auto;
    padding: 22px;
  }

  .site-hero-proof-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  table:not(.request-items-table):not(.quote-display-table):not(.schedule-picker-grid) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .invoice-panel .quote-item-section .item-summary-table {
    display: table;
    max-width: none;
    overflow: visible;
    width: 100%;
  }

  .invoice-panel .financial-document-canvas {
    min-width: var(--quote-summary-table-min-width);
  }

  .quote-editor-panel .financial-document-canvas {
    --quote-col-quantity-width: 4.5rem;
    --quote-col-price-width: 4.75rem;
    --quote-col-amount-width: 4.75rem;
    min-width: 0;
  }

  .quote-editor-panel .quote-display-table:not(.invoice-comparison-table) {
    min-width: 0;
  }

  .quote-editor-panel
    .quote-display-table:not(.invoice-comparison-table)
    tbody
    tr:not(.quote-room-row):not(.quote-edit-room-row):not(.quote-category-row)
    td {
    vertical-align: baseline;
  }

  .quote-editor-panel
    .quote-display-table:not(.invoice-comparison-table)
    tbody
    tr:not(.quote-room-row):not(.quote-edit-room-row):not(.quote-category-row)
    td:not(:first-child)
    .quote-item-value {
    display: inline-block;
    transform: translateY(1px);
  }

  .quote-editor-panel .quote-display-table thead th:not(:first-child) {
    overflow-wrap: normal;
    white-space: normal;
  }

  .invoice-panel .invoice-document-canvas.invoice-comparison-canvas {
    min-width: var(--invoice-comparison-table-min-width);
  }

  .financial-document-canvas .quote-item-section {
    overflow-x: visible;
  }

  .invoice-panel .invoice-document-canvas .invoice-totals strong {
    padding-right: 4px;
  }

  .invoice-panel
    .invoice-document-canvas
    .invoice-comparison-totals
    .invoice-comparison-summary-row
    span.invoice-current-total-value {
    padding-right: 4px;
  }

  .invoice-history-panel .invoice-history-table-wrap .invoice-history-table {
    display: table;
    max-width: none;
    min-width: max-content;
    overflow: visible;
    width: 100%;
  }

  .leads-table {
    overflow-x: visible;
  }

  .service-catalogue-table .service-item-column {
    width: 34%;
  }

  .service-catalogue-table .service-category-column {
    width: 29%;
  }

  .service-catalogue-table .service-price-column {
    width: 25%;
  }

  .service-catalogue-table .service-category-column .row-link,
  .service-catalogue-table .service-category-column .table-sort-link {
    overflow-wrap: anywhere;
  }

  .service-catalogue-table .service-action-column {
    width: 32px;
  }

  .service-catalogue-table .service-action-column form {
    justify-content: flex-end;
  }

  .service-catalogue-table th,
  .service-catalogue-table td {
    padding-block: var(--space-section);
    padding-inline: var(--space-action);
  }

  .service-catalogue-table th {
    font-size: var(--text-xs);
  }

  @media (max-width: 360px) {
    .service-catalogue-table th {
      font-size: calc(var(--text-xs) * 0.92);
    }
  }

  .service-builder {
    grid-template-columns: 1fr;
  }

  .service-room-field,
  .service-category-field,
  .service-item-field {
    grid-column: auto;
    grid-row: auto;
  }

  .service-builder [data-service-room-dimensions],
  .service-builder [data-service-dimensions] {
    display: grid;
    grid-column: 1;
  }

  .service-builder [data-service-room-dimensions] label:first-child,
  .service-builder [data-service-room-dimensions] label:last-child,
  .service-builder [data-service-dimensions] label:first-child,
  .service-builder [data-service-dimensions] label:last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .service-room-field {
    grid-row: 1;
  }

  .service-builder [data-service-room-dimensions] {
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-action);
    align-items: end;
  }

  .service-builder-help {
    grid-column: 1;
    grid-row: 3;
  }

  .service-category-field {
    grid-row: 4;
  }

  .service-item-field {
    grid-row: 5;
  }

  .service-builder-trailing {
    display: flex;
    grid-column: 1;
    grid-row: 6;
    align-items: end;
    justify-content: flex-start;
    gap: var(--space-action);
    min-width: 0;
  }

  .service-builder-trailing [data-service-quantity-control] {
    flex: 0 1 14ch;
    min-width: 10ch;
  }

  .service-builder-trailing [data-service-dimensions] {
    flex: 0 1 30ch;
    grid-template-columns: repeat(2, minmax(10ch, 1fr));
    gap: var(--space-action);
  }

  .service-builder [data-service-room-dimensions][hidden],
  .service-builder [data-service-dimensions][hidden],
  .service-builder-trailing [data-service-quantity-control][hidden] {
    display: none;
  }

  .service-builder button:not(.label-action-button) {
    width: 100%;
  }

  .service-builder .service-add-button.circle-icon-button {
    justify-self: start;
    width: 44px;
  }

  .service-add-button {
    grid-column: auto;
  }

  .quote-preview .quote-col-quantity {
    width: 5.5rem;
  }

  .quote-add-item-grid,
  .quote-add-item.is-add-dimensions .quote-add-item-grid,
  .quote-add-item.is-add-fixed-price .quote-add-item-grid {
    grid-template-columns: 1fr;
  }

  .quote-add-room-field,
  .quote-add-category-field,
  .quote-add-service-field,
  .quote-add-item.is-add-dimensions .quote-add-service-field,
  .quote-add-item.is-add-fixed-price .quote-add-service-field,
  .quote-add-quantity-field {
    grid-column: 1;
    grid-row: auto;
  }

  .quote-add-room-dimensions,
  .quote-add-item-grid [data-quote-add-dimensions] {
    display: grid;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-add-room-dimensions label:first-child,
  .quote-add-room-dimensions label:last-child,
  .quote-add-item-grid [data-quote-add-dimensions] label:first-child,
  .quote-add-item-grid [data-quote-add-dimensions] label:last-child {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
    width: 100%;
  }

  .quote-add-room-dimensions[hidden],
  .quote-add-item-grid [data-quote-add-dimensions][hidden] {
    display: none;
  }

  .quote-preview .quote-col-price,
  .quote-preview .quote-col-amount {
    width: 5.75rem;
  }

  .quote-preview .item-summary-table th,
  .quote-preview .item-summary-table td {
    padding-left: 4px;
    padding-right: 4px;
  }

  .quote-editor-panel .quote-preview .quote-col-quantity {
    width: var(--quote-col-quantity-width);
  }

  .quote-editor-panel .quote-preview .quote-col-price,
  .quote-editor-panel .quote-preview .quote-col-amount {
    width: var(--quote-col-price-width);
  }

  .quote-editor-panel .quote-preview .quote-col-amount {
    width: var(--quote-col-amount-width);
  }

  .quote-editor-panel .quote-display-table th:first-child,
  .quote-editor-panel .quote-display-table td:first-child {
    overflow-wrap: break-word;
  }

  .quote-preview .item-summary-table .quote-category-item-row td:first-child {
    padding-left: var(--space-action);
  }

  .quote-preview .item-summary-table .quote-room-category-item-row td:first-child {
    padding-left: calc(var(--space-form-group) * 2);
  }

  .public-shell.quote-page {
    box-sizing: border-box;
    margin-inline: 0;
    max-width: 100%;
    overflow-x: auto;
    padding-inline: 12px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .quote-page.document-preview-page .quote-response-panel {
    left: var(--space-action);
    position: sticky;
    inline-size: calc(100vw - (2 * var(--space-action)));
    min-inline-size: 0;
    max-inline-size: calc(100vw - (2 * var(--space-action)));
    width: calc(100vw - (2 * var(--space-action)));
  }

  .quote-page .panel.quote-document {
    min-width: var(--document-preview-sheet-width);
    width: var(--document-preview-sheet-width);
  }

  .quote-page .quote-branding-legal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-page .quote-branding-vat-number {
    text-align: right;
  }

  .quote-page .quote-branding-header-row {
    grid-template-columns: minmax(150px, 225px) 1fr;
  }

  .quote-page .quote-branding-header.logo-right .quote-branding-header-row {
    grid-template-columns: 1fr minmax(150px, 225px);
  }

  .quote-page .quote-branding-header.no-logo .quote-branding-header-row {
    grid-template-columns: 1fr;
  }

  .quote-page .quote-branding-header.logo-left .quote-branding-logo,
  .quote-page .quote-branding-header.logo-right .quote-branding-logo {
    height: 225px;
    max-width: 225px;
  }

  .quote-page .quote-branding-header.logo-left .quote-branding-logo {
    justify-self: start;
    order: -1;
  }

  .quote-page .quote-branding-header.logo-right .quote-branding-logo {
    justify-self: end;
    order: 0;
  }

  .quote-page .quote-branding-header.has-logo.logo-left .quote-branding-business-block {
    text-align: right;
  }

  .quote-page .quote-branding-header.has-logo.logo-right .quote-branding-business-block {
    text-align: left;
  }

  .quote-page.document-preview-page .quote-item-section,
  .quote-page.document-preview-page .item-summary-table {
    inline-size: var(--document-preview-content-width);
    max-inline-size: var(--document-preview-content-width);
    max-width: var(--document-preview-content-width);
    min-inline-size: var(--document-preview-content-width);
    min-width: var(--document-preview-content-width);
    width: var(--document-preview-content-width);
  }

  .quote-page.document-preview-page .item-summary-table {
    display: table;
    overflow: visible;
    table-layout: fixed;
  }
}

@media (max-width: 580px) {
  .item-summary-table.request-items-table {
    max-width: 100%;
    min-width: 0;
    table-layout: auto;
    width: 100%;
  }

  .request-items-table colgroup,
  .request-items-table thead {
    display: none;
  }

  .request-items-table tbody,
  .request-items-table tr,
  .request-items-table th,
  .request-items-table td {
    display: block;
  }

  .request-items-table tr:not(.quote-room-row):not(.quote-category-row) {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: var(--space-action);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--space-action) 0;
    width: 100%;
  }

  .request-items-table th,
  .request-items-table td {
    padding: 0;
    text-align: left;
    white-space: normal;
  }

  .request-items-table th:not(:first-child),
  .request-items-table td:not(:first-child) {
    text-align: right;
  }

  .request-items-table tr:not(.quote-room-row):not(.quote-category-row) td:first-child {
    grid-column: 1 / -1;
  }

  .request-items-table td:not(:first-child)::before {
    color: var(--ink);
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-heading);
    line-height: var(--line-heading);
    margin-bottom: var(--space-compact);
    text-align: right;
    text-transform: uppercase;
  }

  .request-items .totals {
    justify-self: stretch;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .request-items .totals div {
    grid-template-columns: minmax(0, 1fr) minmax(7rem, auto);
  }

  .request-items .totals span {
    grid-column: 1;
  }

  .request-items .totals strong {
    grid-column: 2;
  }

  .request-items .totals .total-row::before,
  .request-items .totals .total-row::after {
    left: 0;
  }
}

@media (max-width: 360px) {
  .topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation-list {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    width: 100%;
  }

  .topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation-list .app-navigation-control {
    padding-inline: calc(var(--space-action) / 2);
  }

  .topbar.frosted-navigation-topbar[data-app-navigation-compact] .app-navigation-list .app-navigation-chevron {
    margin-left: calc(var(--space-field) / 2);
  }

  .enquiry-branding-hero .quote-branding-header-row,
  .enquiry-branding-hero .quote-branding-header.logo-right .quote-branding-header-row {
    grid-template-columns: 1fr;
  }

  .enquiry-branding-hero .quote-branding-header.logo-left .quote-branding-logo,
  .enquiry-branding-hero .quote-branding-header.logo-right .quote-branding-logo {
    justify-self: start;
  }

  .enquiry-branding-hero .quote-branding-header.has-logo.logo-left .quote-branding-business-block,
  .enquiry-branding-hero .quote-branding-header.has-logo.logo-right .quote-branding-business-block {
    text-align: left;
  }
}
@media (max-width: 640px) {
  .maintenance-banner-inner {
    width: calc(100% - (2 * var(--space-field)));
    gap: var(--space-field);
  }

  .maintenance-banner-icon {
    align-self: start;
    margin-top: 0.15rem;
  }
}