@font-face {
  font-family: "Inter";
  src: url("/web/assets/inter.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --font-family: "Inter";
  --type-display-size: 32px;
  --type-display-line-height: 40px;
  --type-display-weight: 600;
  --type-display-letter-spacing: -0.4px;
  --type-title-large-size: 24px;
  --type-title-large-line-height: 32px;
  --type-title-large-weight: 600;
  --type-title-large-letter-spacing: -0.2px;
  --type-title-medium-size: 20px;
  --type-title-medium-line-height: 28px;
  --type-title-medium-weight: 600;
  --type-title-medium-letter-spacing: 0px;
  --type-title-small-size: 18px;
  --type-title-small-line-height: 24px;
  --type-title-small-weight: 600;
  --type-title-small-letter-spacing: 0px;
  --type-body-large-size: 16px;
  --type-body-large-line-height: 24px;
  --type-body-large-weight: 400;
  --type-body-large-letter-spacing: 0px;
  --type-body-medium-size: 14px;
  --type-body-medium-line-height: 20px;
  --type-body-medium-weight: 400;
  --type-body-medium-letter-spacing: 0px;
  --type-label-large-size: 16px;
  --type-label-large-line-height: 20px;
  --type-label-large-weight: 600;
  --type-label-large-letter-spacing: 0px;
  --type-label-medium-size: 14px;
  --type-label-medium-line-height: 20px;
  --type-label-medium-weight: 500;
  --type-label-medium-letter-spacing: 0px;
  --type-caption-size: 12px;
  --type-caption-line-height: 16px;
  --type-caption-weight: 500;
  --type-caption-letter-spacing: 0.1px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 40px;
  --spacing-huge: 48px;
  --spacing-massive: 64px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-extra-large: 24px;
  --radius-full: 999px;
  --size-minimum-touch-target: 48px;
  --size-button-height: 52px;
  --size-text-field-height: 56px;
  --size-top-bar-height: 56px;
  --size-icon-small: 16px;
  --size-icon-medium: 24px;
  --size-icon-large: 32px;
  --size-content-max-width: 560px;
  --stroke-default: 1px;
  --stroke-focused: 2px;
  --motion-fast: 120ms;
  --motion-standard: 200ms;
  --motion-emphasized: 320ms;
  --brand: #175cd3;
  --on-brand: #ffffff;
  --brand-pressed: #1849a9;
  --brand-container: #d1e9ff;
  --on-brand-container: #102a56;
  --background: #f7f9fc;
  --surface: #ffffff;
  --surface-secondary: #eef2f6;
  --text-primary: #172033;
  --text-secondary: #5d677a;
  --text-disabled: #98a2b3;
  --border: #d9dfe8;
  --border-focused: #175cd3;
  --success: #087a55;
  --success-container: #d1fadf;
  --warning: #b54708;
  --warning-container: #fef0c7;
  --error: #b42318;
  --error-container: #fee4e2;
  --scrim: #10182899;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #84adff;
    --on-brand: #102a56;
    --brand-pressed: #b2ccff;
    --brand-container: #1849a9;
    --on-brand-container: #d1e9ff;
    --background: #0b1220;
    --surface: #141c2b;
    --surface-secondary: #202939;
    --text-primary: #f5f7fa;
    --text-secondary: #cdd5df;
    --text-disabled: #697586;
    --border: #364152;
    --border-focused: #84adff;
    --success: #75e0a7;
    --success-container: #085d3a;
    --warning: #fec84b;
    --warning-container: #93370d;
    --error: #fda29b;
    --error-container: #912018;
    --scrim: #000000b3;
  }
}

* { box-sizing: border-box; }

html { font-family: var(--font-family), system-ui, sans-serif; background: var(--background); }

body {
  margin: 0;
  min-width: 20rem;
  color: var(--text-primary);
  background: var(--background);
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line-height);
}

a { color: var(--brand); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 0.1875rem solid var(--border-focused);
  outline-offset: 0.1875rem;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--surface);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.page {
  width: min(100%, calc(var(--size-content-max-width) + 2 * var(--spacing-xl)));
  margin-inline: auto;
  padding: var(--spacing-xxl) var(--spacing-xl) var(--spacing-massive);
}

.brand-row,
.top-row,
.inline-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.top-row { justify-content: space-between; align-items: flex-start; }
.inline-row { flex-wrap: wrap; }

.brand-mark,
.status-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 1.5rem;
  font-weight: 700;
}
.status-mark {
  width: 3rem;
  height: 3rem;
  background: var(--brand-container);
  color: var(--on-brand-container);
}
.brand-name { font-size: 1.25rem; line-height: 1.4; font-weight: 600; }

h1 {
  margin: 2rem 0 0.5rem;
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-letter-spacing);
  font-weight: var(--type-display-weight);
}
h2 { margin: 0; font-size: var(--type-title-medium-size); line-height: var(--type-title-medium-line-height); font-weight: var(--type-title-medium-weight); }
h3 { margin: 0; font-size: var(--type-title-small-size); line-height: var(--type-title-small-line-height); font-weight: var(--type-title-small-weight); }
p { margin-block: 0.5rem; }
.lede, .muted { color: var(--text-secondary); }
.caption { color: var(--text-secondary); font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.00625rem; }

.stack { display: grid; gap: 1rem; margin-block-start: 2rem; }
.stack-tight { display: grid; gap: 0.5rem; }
.workspace-navigation { display: grid; gap: var(--spacing-sm); margin-block-start: var(--spacing-md); }
.plan-list { display: grid; gap: var(--spacing-md); }
.plan-card { margin-block-start: 0; }
.feature-list { margin: 0; padding-inline-start: var(--spacing-lg); }
.feature-list li + li { margin-block-start: var(--spacing-xs); }
.usage-list meter { width: 100%; min-height: var(--spacing-md); accent-color: var(--brand); }
.companion-note { border-color: var(--brand); background: var(--brand-container); color: var(--on-brand-container); }
.branding-preview { display: grid; gap: var(--spacing-md); }
.branding-preview img {
  display: block;
  width: min(100%, 20rem);
  max-height: 12rem;
  margin-inline: auto;
  padding: var(--spacing-md);
  border: var(--stroke-default) solid var(--border);
  border-radius: var(--radius-medium);
  background: #ffffff;
  object-fit: contain;
}

.field { display: grid; gap: 0.5rem; }
label { font-size: var(--type-label-medium-size); line-height: var(--type-label-medium-line-height); font-weight: var(--type-label-medium-weight); }
input, select, textarea {
  width: 100%;
  min-height: var(--size-text-field-height);
  padding: 0.75rem 1rem;
  border: var(--stroke-default) solid var(--border);
  border-radius: var(--radius-medium);
  color: var(--text-primary);
  background: var(--surface);
  font: inherit;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border: var(--stroke-focused) solid var(--border-focused); outline: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
.field-error { margin: 0; color: var(--error); font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.supporting-text { margin: 0; color: var(--text-secondary); font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.warning-text { color: var(--warning); }

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-button-height);
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: var(--radius-medium);
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, button:hover { background: var(--brand-pressed); }
.button-secondary {
  border: 0.0625rem solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
}
.button-secondary:hover { background: var(--surface-secondary); }
.button-danger {
  border: var(--stroke-default) solid var(--error);
  background: var(--error-container);
  color: var(--error);
}
.button-danger:hover { background: var(--error); color: var(--on-brand); }
.button-link {
  min-height: var(--size-minimum-touch-target);
  padding: 0.5rem;
  background: transparent;
  color: var(--brand);
}
.button-link:hover { background: var(--surface-secondary); }
.full { width: 100%; }

.banner,
.card {
  padding: 1rem;
  border: 0.0625rem solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
}
.banner { border-color: var(--error); background: var(--error-container); }
.banner p { margin: 0; }
.success { border-color: var(--success); background: var(--success-container); }
.card { display: grid; gap: 1rem; margin-block-start: 2rem; padding: 1.5rem; }

.top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--size-top-bar-height);
}
.page-title {
  margin: 0;
  font-size: var(--type-title-large-size);
  line-height: var(--type-title-large-line-height);
  letter-spacing: var(--type-title-large-letter-spacing);
  font-weight: var(--type-title-large-weight);
}
.context-label { margin-block: 0.5rem 0; color: var(--text-secondary); }
.text-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-minimum-touch-target);
  margin-inline-start: -0.5rem;
  padding-inline: 0.5rem;
  font-weight: 500;
}
.search-form { display: grid; gap: 0.5rem; margin-block: 2rem; }
.search-form .inline-row { align-items: stretch; }
.search-form .inline-row input { flex: 1 1 15rem; }
.search-form .inline-row button { flex: 0 0 auto; }
.section-title { margin-block: 0 1rem; }
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.detail-section { margin-block-start: 2rem; }
.result-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-row {
  display: grid;
  gap: 0.25rem;
  min-height: var(--size-minimum-touch-target);
  padding: 1rem;
  border: var(--stroke-default) solid var(--border);
  border-radius: var(--radius-medium);
  color: var(--text-primary);
  background: var(--surface);
  text-decoration: none;
}
.result-row:hover { border-color: var(--border-focused); background: var(--surface-secondary); }
.result-title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.informational-row:hover { border-color: var(--border); background: var(--surface); }
.metadata-row { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); color: var(--text-secondary); }
.empty-state {
  display: grid;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  border: var(--stroke-default) solid var(--border);
  border-radius: var(--radius-large);
  background: var(--surface);
  text-align: center;
}
.empty-state p { margin: 0; color: var(--text-secondary); }
.empty-state.compact { padding: var(--spacing-lg); }
.pagination { display: grid; gap: 0.75rem; margin-block-start: 1rem; }
.pagination-status { margin: 0; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.25rem; }
.detail-card { margin-block-start: 1.5rem; }
.detail-list { display: grid; gap: 1rem; margin: 0; }
.detail-list div { display: grid; gap: 0.25rem; }
.detail-list dt { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.25rem; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.detail-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1rem;
  padding: 1rem;
  border-block-end: var(--stroke-default) solid var(--border);
}
address { display: grid; gap: 0.25rem; font-style: normal; overflow-wrap: anywhere; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.field-group {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: var(--stroke-default) solid var(--border);
  border-radius: var(--radius-large);
}
.field-group legend { padding-inline: 0.5rem; font-size: 1rem; line-height: 1.25rem; font-weight: 600; }
.address-remove { justify-self: start; margin-block-start: -0.5rem; }
.validation-summary {
  margin-block-start: 1rem;
  padding: 1rem;
  border: var(--stroke-default) solid var(--error);
  border-radius: var(--radius-large);
  background: var(--error-container);
}
.validation-summary h2 { font-size: 1rem; line-height: 1.5rem; }
.validation-summary ul { margin-block: 0.5rem 0; padding-inline-start: 1.5rem; }
.sensitive-banner {
  margin-block-start: 1.5rem;
  padding: 1rem;
  border: var(--stroke-default) solid var(--warning);
  border-radius: var(--radius-large);
  color: var(--text-primary);
  background: var(--warning-container);
}
.sensitive-banner p { margin-block-end: 0; }
.sensitive-value { margin: 0; }
.confirmation-card { border-color: var(--warning); background: var(--warning-container); }
.invitation-preview { border-color: var(--brand); }

.center { text-align: center; }
.footer-action { margin-block-start: 1.5rem; text-align: center; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 28rem) {
  .page { padding-inline: 1rem; }
  .top-row { align-items: stretch; flex-direction: column; }
  .top-bar, .section-heading-row { align-items: stretch; flex-direction: column; }
  .search-form .inline-row { display: grid; }
}

@media (prefers-reduced-motion: no-preference) {
  a, button, input, select, textarea, .button { transition: var(--motion-fast) ease; }
}

.service-photo { max-width: 100%; height: auto; object-fit: contain; }