/* Moacere components. Class names are the public API of the design system — see templates/ui_kit.html
   for every component and state. Author: Smarketer. */

/* =================================================================================================
   Buttons
   ================================================================================================= */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--heading);
  --btn-border: #d9d1e8;
  --btn-bg-hover: var(--lavender);
  --btn-spinner: currentColor;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--control-h);
  padding: 0 22px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-input);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-app);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; }
.btn--primary {
  --btn-bg: var(--brand); --btn-fg: #fff; --btn-border: var(--brand); --btn-bg-hover: var(--brand-hover);
}
.btn--primary:hover { border-color: var(--brand-hover); box-shadow: var(--shadow-brand); }
.btn--primary:active { background: var(--brand-active); }
.btn--secondary { --btn-bg: var(--surface); --btn-fg: var(--heading); --btn-border: #d9d1e8; }
.btn--secondary:hover { border-color: var(--brand-300); }
.btn--tonal { --btn-bg: var(--brand-100); --btn-fg: var(--brand-tone-ink); --btn-border: transparent; --btn-bg-hover: var(--brand-200); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--heading); --btn-border: transparent; --btn-bg-hover: var(--canvas-strong); }
.btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: var(--danger); --btn-bg-hover: var(--danger-hover); }
.btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--danger-ink); --btn-border: transparent; --btn-bg-hover: var(--danger-bg); }
.btn--success { --btn-bg: var(--accent); --btn-fg: var(--ink); --btn-border: var(--accent); --btn-bg-hover: var(--accent-hover); }
.btn--on-dark { --btn-bg: rgba(255, 255, 255, 0.08); --btn-fg: #fff; --btn-border: rgba(255, 255, 255, 0.24); --btn-bg-hover: rgba(255, 255, 255, 0.16); }
.btn--link {
  --btn-bg: transparent; --btn-border: transparent; --btn-bg-hover: transparent; --btn-fg: var(--brand-ink);
  min-height: var(--touch);
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.btn--link:hover { color: var(--brand-active); text-decoration-thickness: 2px; }
.btn--sm { min-height: var(--control-h-sm); padding: 0 16px; font-size: var(--fs-sm); border-radius: 10px; }
.btn--sm::before { content: ""; position: absolute; inset: -2px 0; } /* 44px hit area */
.btn--sm .icon { width: 18px; height: 18px; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--touch); min-height: var(--touch); padding: 0; flex: none; }
.btn--icon.btn--sm { width: var(--control-h-sm); min-height: var(--control-h-sm); }
.btn:disabled:not(.is-loading), .btn[aria-disabled="true"] {
  --btn-bg: #ebe8f2; --btn-fg: #807d97; --btn-border: #ebe8f2; --btn-bg-hover: #ebe8f2;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn.is-loading { color: transparent !important; pointer-events: none; cursor: progress; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--btn-fg);
  border-right-color: transparent;
  animation: ds-spin 0.7s linear infinite;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-1-5); align-items: center; }

@keyframes ds-spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--brand-200);
  border-top-color: var(--brand);
  animation: ds-spin 0.7s linear infinite;
}

/* =================================================================================================
   Forms
   ================================================================================================= */
.form { display: grid; gap: var(--s-3); }
.form-row { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field__label, .label {
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.field__req { color: var(--danger-ink); margin-inline-start: 2px; }
.field__optional { color: var(--muted); font-weight: var(--fw-regular); }
.field__help { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.field__error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: var(--danger-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.field__error:empty { display: none; }
.field__error .icon { width: 16px; height: 16px; margin-top: 1px; }
.form-errors { /* non-field errors block — use with .alert */ }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-body); /* 16px: prevents iOS zoom on focus */
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--control-border-hover); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible,
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-200);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--danger), 0 0 0 4px var(--danger-border);
}
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly] {
  background: var(--canvas);
  color: var(--muted-strong);
  border-color: var(--border);
}
.input--sm, .select--sm { min-height: var(--control-h-sm); font-size: var(--fs-sm); border-radius: 10px; }
.textarea { min-height: 120px; padding: 12px 14px; line-height: var(--lh-body); }
.select {
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4a68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .input { flex: 1; }
.input-group__icon {
  position: absolute;
  inset-inline-start: 14px;
  width: 20px; height: 20px;
  color: var(--muted);
  pointer-events: none;
}
.input-group__icon + .input { padding-inline-start: 44px; }
.input-group__action { position: absolute; inset-inline-end: 2px; }
.input-group:has(.input-group__action) > .input { padding-inline-end: 48px; }

/* Checkbox + radio (native inputs, restyled) */
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: var(--touch);
  padding-block: 10px;
  color: var(--ink);
  font-size: var(--fs-app);
  line-height: 1.5;
  cursor: pointer;
}
.check__input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--control-border);
  border-radius: 6px;
  background: var(--surface) center / 16px no-repeat;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check__input[type="radio"] { border-radius: 50%; }
.check__input:hover { border-color: var(--brand); }
.check__input:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.check__input[type="radio"]:checked {
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--brand) 0 5px, transparent 5.5px);
  background-size: auto;
}
.check__input:indeterminate {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: linear-gradient(#fff, #fff);
  background-size: 10px 2.5px;
}
.check__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.check__input[aria-invalid="true"] { border-color: var(--danger); }
.check__input:disabled { background-color: var(--canvas); border-color: var(--border); cursor: not-allowed; }
.check__text { padding-top: 1px; }
.check__hint { display: block; color: var(--muted); font-size: var(--fs-xs); }
.check--card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.check--card:has(:checked) { border-color: var(--brand); background: var(--brand-50); }

/* Switch: <input type="checkbox" role="switch" class="switch"> */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--touch); }
.switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--control-border);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(3, 2, 46, 0.3);
  transition: transform var(--dur) var(--ease-spring);
}
.switch::after { content: ""; position: absolute; inset: -9px -2px; } /* 44px hit area */
.switch:checked { background: var(--brand); }
.switch:checked::before { transform: translateX(20px); }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* File drop zone: <label class="dropzone"> wrapping <input type="file" class="dropzone__input"> */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-3);
  border: 2px dashed var(--brand-300);
  border-radius: var(--radius-card);
  background: var(--lavender);
  color: var(--muted-strong);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--brand); background: var(--brand-100); }
.dropzone:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--s-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.dropzone__icon .icon { width: 26px; height: 26px; }
.dropzone__title { color: var(--heading); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.dropzone__meta { font-size: var(--fs-xs); color: var(--muted); }
.dropzone__files { display: grid; gap: var(--s-1); width: 100%; max-width: 420px; margin-top: var(--s-1); }
.dropzone__file {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  text-align: start;
}

/* Phone input: country code + national number */
.phone-input { display: flex; }
.phone-input__code {
  flex: none;
  width: auto;
  min-width: 108px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.phone-input__number { flex: 1; min-width: 0; margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
.phone-input > :focus { position: relative; z-index: 1; }

/* Segmented control: radio group styled as a switcher */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--canvas-strong);
}
.segmented__option { position: relative; display: flex; }
.segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  color: var(--muted-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur);
}
.segmented__label::before { content: ""; position: absolute; inset: -2px 0; }
.segmented__label:hover { color: var(--heading); }
.segmented__input:checked + .segmented__label { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.segmented__input:focus-visible + .segmented__label { outline: 3px solid var(--focus); outline-offset: 1px; }
.segmented__badge {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-100);
  color: var(--success-ink);
  font-size: var(--fs-2xs);
}

/* =================================================================================================
   Cards, stat cards, callouts
   ================================================================================================= */
.card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: var(--s-3);
}
.card--flush { padding: 0; overflow: hidden; }
.card--soft { border-color: transparent; background: var(--lavender); }
.card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.card--interactive { transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.card--interactive:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card--interactive a.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1-5);
  margin-bottom: var(--s-2);
}
.card--flush .card__header { padding: var(--s-3) var(--s-3) 0; }
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--heading); }
.card__subtitle { color: var(--muted); font-size: var(--fs-sm); }
.card__body > * + * { margin-top: var(--s-1-5); }
.card__footer {
  display: flex; flex-wrap: wrap; gap: var(--s-1-5); align-items: center; justify-content: flex-end;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--divider);
}
.icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand-100);
  color: var(--brand);
}
.icon-tile--solid { background: var(--brand); color: #fff; width: 32px; height: 32px; border-radius: 9px; }
.icon-tile--solid .icon { width: 18px; height: 18px; }
.icon-tile--success { background: var(--accent-50); color: var(--success-ink); }
.icon-tile--sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile--lg .icon { width: 26px; height: 26px; }

.stat-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099.98px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-card {
  display: grid;
  align-content: start;
  gap: var(--s-1-5);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
a.stat-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); color: inherit; }
.stat-card__label { color: var(--muted-strong); font-size: var(--fs-app); }
.stat-card__value {
  font-size: var(--fs-3xl);
  line-height: 1.1;
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}
.stat-card__value--brand { color: var(--brand-ink); }
.stat-card__value--warning { color: var(--warning-ink); }
.stat-card__value--success { color: var(--success-ink); }
.stat-card__value--neutral { color: var(--muted-strong); }
.stat-card__meta { color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 639.98px) {
  .stat-grid { gap: var(--s-1-5); }
  .stat-card { padding: var(--s-2); border-radius: var(--radius-md); }
  .stat-card__value { font-size: var(--fs-2xl); }
  .stat-card__label { font-size: var(--fs-sm); }
}

.callout {
  padding: var(--s-2-5) var(--s-3);
  border-radius: var(--radius-md);
  background: var(--lavender);
  color: var(--muted-strong);
  font-size: var(--fs-sm);
}
.callout--success { background: var(--accent-50); color: var(--success-ink); }

/* =================================================================================================
   Status badges (word + symbol, never colour only) and small badges
   ================================================================================================= */
.status {
  --st-bg: var(--neutral-bg); --st-fg: var(--neutral-ink); --st-bd: var(--neutral-border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 12px 2px 8px;
  border: 1px solid var(--st-bd);
  border-radius: var(--radius-pill);
  background: var(--st-bg);
  color: var(--st-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  white-space: nowrap;
}
.status .icon { width: 15px; height: 15px; stroke-width: 2; }
.status--neutral { --st-bg: var(--neutral-bg); --st-fg: var(--neutral-ink); --st-bd: var(--neutral-border); }
.status--brand { --st-bg: var(--brand-bg); --st-fg: var(--brand-tone-ink); --st-bd: var(--brand-border); }
.status--info { --st-bg: var(--info-bg); --st-fg: var(--info-ink); --st-bd: var(--info-border); }
.status--success { --st-bg: var(--success-bg); --st-fg: var(--success-ink); --st-bd: var(--success-border); }
.status--warning { --st-bg: var(--warning-bg); --st-fg: var(--warning-ink); --st-bd: var(--warning-border); }
.status--danger { --st-bg: var(--danger-bg); --st-fg: var(--danger-ink); --st-bd: var(--danger-border); }
.status--slate { --st-bg: var(--slate-bg); --st-fg: var(--slate-ink); --st-bd: var(--slate-border); }
.status--lg { min-height: 34px; padding: 4px 14px 4px 10px; font-size: var(--fs-sm); }
.status.is-live .icon { animation: ds-spin 1.6s linear infinite; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-100);
  color: var(--brand-tone-ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge--solid { background: var(--brand); color: #fff; }
.badge--success { background: var(--accent); color: var(--ink); }
.badge--warning { background: var(--warning-bg); color: var(--warning-ink); }
.badge--danger { background: var(--danger); color: #fff; }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.badge--sandbox {
  height: 30px;
  padding: 0 12px;
  background: var(--warning-bg);
  color: var(--warning-ink);
  border: 1px solid var(--warning-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.badge--secure {
  height: 30px;
  padding: 0 12px;
  background: var(--lavender);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted-strong);
  font-size: var(--fs-xs);
}
.chip .icon { width: 14px; height: 14px; }
.chip__remove { display: grid; place-items: center; width: 24px; height: 24px; margin-inline-end: -8px; border-radius: 50%; color: var(--muted); }
.chip__remove:hover { background: var(--canvas-strong); color: var(--ink); }

/* =================================================================================================
   Tables (stack into cards under 768px when .table--stack)
   ================================================================================================= */
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: -3px; }
.table { width: 100%; font-size: var(--fs-app); }
.table caption { text-align: start; padding: 0 0 var(--s-1); color: var(--muted); font-size: var(--fs-sm); }
.table th {
  padding: 14px var(--s-3);
  background: var(--surface-sunken);
  color: var(--muted-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-align: start;
  white-space: nowrap;
}
.table th[aria-sort] a, .table th button { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; min-height: 32px; }
.table td { padding: 14px var(--s-3); border-bottom: 1px solid var(--divider); vertical-align: middle; }
.table tbody tr { transition: background-color var(--dur-fast); }
.table tbody tr:hover { background: #fbfaff; }
.table tbody tr:last-child td { border-bottom: 0; }
.table--inset td:first-child, .table--inset th:first-child { padding-inline-start: var(--s-3); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
.table__doc { display: flex; align-items: center; gap: var(--s-1-5); min-width: 0; }
.table__doc-icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--lavender);
  color: var(--brand);
}
.table__doc-title { color: var(--heading); font-weight: var(--fw-medium); text-decoration: none; display: block; }
a.table__doc-title:hover { color: var(--brand-ink); text-decoration: underline; }
a.table__doc-title::after { content: ""; position: absolute; inset: 0; } /* whole-row click target */
.table--linked tbody tr { position: relative; }
.table__sub { color: var(--muted); font-size: var(--fs-xs); }
.table__actions { position: relative; z-index: 1; text-align: end; white-space: nowrap; }

@media (max-width: 767.98px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  /* minmax(0, 1fr): without it the single grid track grows to the min-content width of nowrap/.truncate
     text and pushes the cards past the panel at 390px (CONTRACTS log, envelopes-core 10). */
  .table--stack tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1-5); padding: var(--s-1-5); }
  .table--stack tr, .table--stack td { min-width: 0; }
  .table--stack tr {
    position: relative;
    padding: var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .table--stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 0;
    border: 0;
    text-align: end;
  }
  .table--stack td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: start;
  }
  .table--stack td[data-label=""]::before, .table--stack td:not([data-label])::before { content: none; }
  .table--stack td.table__primary { display: block; text-align: start; padding-bottom: var(--s-1); }
  .table--stack td.table__actions { justify-content: flex-end; }
  .table--stack tbody tr:hover { background: var(--surface); }
}

/* =================================================================================================
   Tabs
   ================================================================================================= */
.tabs__list {
  display: flex;
  gap: var(--s-3);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 10px 2px 12px;
  color: var(--muted-strong);
  font-weight: var(--fw-medium);
  font-size: var(--fs-app);
  text-decoration: none;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--heading); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--brand-ink); }
.tabs__tab[aria-selected="true"]::after, .tabs__tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}
.tabs__tab:focus-visible { outline-offset: -2px; }
.tabs__panel { padding-top: var(--s-3); }
.tabs__panel:focus-visible { outline-offset: 4px; }

/* =================================================================================================
   Stepper (editor steps 1–4)
   ================================================================================================= */
.stepper { display: flex; gap: var(--s-1); list-style: none; padding: 0; counter-reset: step; }
.stepper__item { flex: 1; min-width: 0; }
.stepper__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 8px 0 12px;
  border-bottom: 3px solid var(--divider);
  color: var(--muted);
  font-size: var(--fs-app);
  text-decoration: none;
}
a.stepper__link:hover { color: var(--heading); }
.stepper__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--canvas-strong);
  color: var(--muted-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.stepper__num .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.stepper__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper__item.is-complete .stepper__link { border-bottom-color: var(--accent); color: var(--heading); }
.stepper__item.is-complete .stepper__num { background: var(--accent); color: var(--ink); }
.stepper__item.is-current .stepper__link { border-bottom-color: var(--brand); color: var(--brand-ink); font-weight: var(--fw-medium); }
.stepper__item.is-current .stepper__num { background: var(--brand); color: #fff; }
.stepper__mobile { display: none; }
@media (max-width: 639.98px) {
  .stepper__item:not(.is-current) .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stepper__item:not(.is-current) { flex: 0 0 auto; }
  .stepper__item.is-current { flex: 1; }
}

/* =================================================================================================
   Avatar
   ================================================================================================= */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--fs-2xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--fs-body); }
.avatar--soft { background: var(--brand-100); color: var(--brand-tone-ink); }
.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 2px solid var(--surface); margin-inline-start: -8px; }
.avatar-stack .avatar:first-child { margin-inline-start: 0; }

/* =================================================================================================
   Dropdown menu
   ================================================================================================= */
.dropdown { position: relative; display: inline-flex; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  display: grid;
  gap: 2px;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: ds-pop var(--dur) var(--ease-out);
}
.menu--start { inset-inline-end: auto; inset-inline-start: 0; transform-origin: top left; }
.menu--up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
.menu[hidden] { display: none; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--touch);
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: var(--fs-app);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.menu__item .icon { width: 20px; height: 20px; color: var(--muted-strong); }
.menu__item:hover, .menu__item:focus-visible { background: var(--canvas); color: var(--ink); outline: none; }
.menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.menu__item[aria-current="true"], .menu__item[aria-checked="true"] { color: var(--brand-ink); font-weight: var(--fw-medium); }
.menu__item--danger, .menu__item--danger .icon { color: var(--danger-ink); }
.menu__item--danger:hover { background: var(--danger-bg); color: var(--danger-ink); }
.menu__sep { height: 1px; margin: 6px 4px; background: var(--divider); border: 0; }
.menu__label { padding: 8px 12px 4px; color: var(--muted); font-size: var(--fs-xs); }
.menu__head { display: flex; gap: 12px; align-items: center; padding: 8px 12px 12px; }
.menu form { display: contents; }
@keyframes ds-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

/* =================================================================================================
   Modal (<dialog class="modal">) and bottom sheet (<dialog class="sheet">)
   ================================================================================================= */
.modal, .sheet {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal[open], .sheet[open] { display: flex; flex-direction: column; animation: ds-modal-in var(--dur-slow) var(--ease-out); }
.modal--lg { width: min(800px, calc(100% - 32px)); }
.modal--sm { width: min(420px, calc(100% - 32px)); }
.modal::backdrop, .sheet::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(3px);
  animation: ds-fade var(--dur) var(--ease-out);
}
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-1);
}
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--heading); }
.modal__close { margin: -8px -10px 0 0; }
.modal__body { padding: var(--s-1) var(--s-3) var(--s-3); overflow-y: auto; color: var(--muted-strong); }
.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-1-5);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--divider);
  background: var(--surface-sunken);
}
@keyframes ds-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes ds-fade { from { opacity: 0; } }
@keyframes ds-sheet-in { from { transform: translateY(100%); } }
body:has(dialog[open]) { overflow: hidden; }

.sheet__handle {
  display: none;
  width: 40px; height: 5px;
  margin: 10px auto 0;
  border-radius: var(--radius-pill);
  background: var(--border);
}
@media (max-width: 767.98px) {
  .modal__footer { flex-direction: column-reverse; }
  .modal__footer > .btn { width: 100%; }
  .sheet {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet[open] { animation: ds-sheet-in var(--dur-slow) var(--ease-out); }
  .sheet__handle { display: block; }
  .sheet.is-dragging { transition: none; }
}

/* =================================================================================================
   Toasts
   ================================================================================================= */
.toast-region {
  position: fixed;
  inset: auto var(--s-3) var(--s-3) auto;
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-1);
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: ds-toast-in var(--dur-slow) var(--ease-spring);
}
.toast.is-leaving { animation: ds-toast-out var(--dur) var(--ease-in-out) forwards; }
.toast__icon { width: 20px; height: 20px; margin-top: 1px; color: var(--brand-300); }
.toast--success .toast__icon { color: var(--accent); }
.toast--warning .toast__icon { color: #ffc75a; }
.toast--danger .toast__icon { color: #ff8f86; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: var(--fw-semibold); }
.toast__close { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -2px -6px 0; border-radius: 8px; color: #cfcde0; }
.toast__close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.toast__close:focus-visible { outline-color: var(--focus-on-dark); }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes ds-toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 639.98px) {
  .toast-region { inset: auto 16px calc(16px + env(safe-area-inset-bottom)) 16px; width: auto; }
  body:has(.signing-actions) .toast-region { bottom: 132px; }
}

/* =================================================================================================
   Alerts
   ================================================================================================= */
.alert {
  --al-bg: var(--info-bg); --al-fg: var(--info-ink); --al-bd: var(--info-border);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--al-bd);
  border-radius: var(--radius-md);
  background: var(--al-bg);
  color: var(--al-fg);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.alert > .icon { width: 20px; height: 20px; margin-top: 1px; }
.alert__body { flex: 1; min-width: 0; }
.alert__body > * + * { margin-top: 4px; }
.alert__title { font-weight: var(--fw-semibold); font-size: var(--fs-app); }
.alert a { color: inherit; font-weight: var(--fw-medium); }
.alert--brand { --al-bg: var(--brand-bg); --al-fg: var(--brand-tone-ink); --al-bd: var(--brand-border); }
.alert--success { --al-bg: var(--success-bg); --al-fg: var(--success-ink); --al-bd: var(--success-border); }
.alert--warning { --al-bg: var(--warning-bg); --al-fg: var(--warning-ink); --al-bd: var(--warning-border); }
.alert--danger { --al-bg: var(--danger-bg); --al-fg: var(--danger-ink); --al-bd: var(--danger-border); }
.alert--neutral { --al-bg: var(--neutral-bg); --al-fg: var(--neutral-ink); --al-bd: var(--neutral-border); }
.alert__actions { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-1); }
.alert__close { margin: -8px -8px -8px 0; color: inherit; }

/* =================================================================================================
   Empty states, skeletons, progress
   ================================================================================================= */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  max-width: 440px;
  margin-inline: auto;
  padding: var(--s-6) var(--s-2);
  text-align: center;
}
.empty__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-1);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--brand-100), var(--lavender));
  color: var(--brand);
}
.empty__art .icon { width: 32px; height: 32px; }
.empty__art::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px; height: 18px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
}
.empty__title { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--heading); }
.empty__text { color: var(--muted); font-size: var(--fs-app); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1-5); margin-top: var(--s-1-5); }
.empty--compact { padding: var(--s-4) var(--s-2); }

.skeleton {
  display: block;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #efecf5 0%, #f7f5fb 40%, #efecf5 80%) 0 0 / 300% 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
}
.skeleton--title { height: 22px; width: 45%; }
.skeleton--text { width: 100%; }
.skeleton--short { width: 60%; }
.skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton--tile { width: 40px; height: 40px; border-radius: 12px; }
.skeleton--block { height: 120px; border-radius: var(--radius-md); }
.skeleton-row { display: flex; align-items: center; gap: var(--s-1-5); }
.skeleton-row > .stack { flex: 1; }
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.progress {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--canvas-strong);
  overflow: hidden;
  appearance: none;
  color: var(--brand);
}
.progress::-webkit-progress-bar { background: var(--canvas-strong); border-radius: var(--radius-pill); }
.progress::-webkit-progress-value { background: var(--brand); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.progress::-moz-progress-bar { background: var(--brand); border-radius: var(--radius-pill); }
.progress--success::-webkit-progress-value { background: var(--accent); }
.progress--success::-moz-progress-bar { background: var(--accent); }
.progress--warning::-webkit-progress-value { background: #e59a00; }
.progress--warning::-moz-progress-bar { background: #e59a00; }
.progress--sm { height: 6px; }
.progress:indeterminate { background: linear-gradient(90deg, var(--canvas-strong) 0 30%, var(--brand) 30% 55%, var(--canvas-strong) 55%) 0 0 / 250% 100%; animation: ds-shimmer 1.2s linear infinite; }
.progress:indeterminate::-webkit-progress-bar { background: transparent; }
.progress:indeterminate::-moz-progress-bar { background: transparent; }
.progress-label { display: flex; justify-content: space-between; gap: var(--s-1); margin-bottom: 6px; font-size: var(--fs-xs); color: var(--muted-strong); }

/* =================================================================================================
   Pagination, breadcrumbs
   ================================================================================================= */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1-5); }
.pagination__list { display: flex; gap: 4px; list-style: none; padding: 0; }
.pagination__link {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch);
  height: var(--touch);
  padding: 0 10px;
  border-radius: var(--radius-input);
  color: var(--heading);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
a.pagination__link:hover { background: var(--canvas-strong); color: var(--heading); }
.pagination__link[aria-current="page"] { background: var(--brand); color: #fff; font-weight: var(--fw-medium); }
.pagination__link--nav { display: inline-flex; gap: 6px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface); }
.pagination__link[aria-disabled="true"] { color: #9d9ab2; pointer-events: none; }
.pagination__summary { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 639.98px) { .pagination__page { display: none; } .pagination__page[aria-current="page"] { display: inline-grid; } }

.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; font-size: var(--fs-sm); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; color: #b6b2c8; }
.breadcrumbs a { color: var(--muted-strong); text-decoration: none; padding-block: 10px; }
.breadcrumbs a:hover { color: var(--brand-ink); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--heading); font-weight: var(--fw-medium); }

/* =================================================================================================
   Code blocks (developer docs), inline code, key-value lists
   ================================================================================================= */
:not(pre) > code {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--heading);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
.code-block {
  position: relative;
  border-radius: var(--radius-md);
  background: #0d0c2b;
  color: #ebe9f7;
  overflow: hidden;
}
.code-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  padding: 6px 6px 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #b9b6d3;
  font-size: var(--fs-xs);
}
.code-block pre {
  margin: 0;
  padding: var(--s-2);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  tab-size: 2;
}
.code-block pre:focus-visible { outline-color: var(--focus-on-dark); outline-offset: -3px; }
.code-block .tok-key { color: #c6a6ff; }
.code-block .tok-str { color: #8ee88e; }
.code-block .tok-com { color: #9a97b8; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: #d8d5ec;
  font-size: var(--fs-xs);
}
.copy-btn::before { content: ""; position: absolute; }
.copy-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.copy-btn:focus-visible { outline-color: var(--focus-on-dark); }
.copy-btn .icon { width: 16px; height: 16px; }
.copy-btn.is-copied { color: var(--accent); }
.copy-btn--light { color: var(--muted-strong); border: 1px solid var(--border); background: var(--surface); }
.copy-btn--light:hover { background: var(--lavender); color: var(--brand-ink); }
.copy-btn--light:focus-visible { outline-color: var(--focus); }
.secret-box {
  display: flex; align-items: center; gap: var(--s-1);
  padding: 8px 8px 8px 14px;
  border: 1px dashed var(--brand-300);
  border-radius: var(--radius-input);
  background: var(--lavender);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.secret-box > code, .secret-box > span { flex: 1; min-width: 0; overflow-wrap: anywhere; border: 0; background: none; padding: 0; }

.kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 10px var(--s-3);
  font-size: var(--fs-app);
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.kv--divided { gap: 0; }
.kv--divided dt, .kv--divided dd { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.kv--divided dt:last-of-type, .kv--divided dd:last-of-type { border-bottom: 0; }
@media (max-width: 639.98px) {
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: var(--s-1); }
  .kv--divided dt { padding-bottom: 0; border-bottom: 0; }
}
.hash { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-strong); overflow-wrap: anywhere; }

/* =================================================================================================
   Timeline (envelope events, activity panel)
   ================================================================================================= */
.timeline { position: relative; display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.timeline__item { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 14px; }
.timeline__item::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: calc(-1 * var(--s-3) + 4px);
  left: 5px;
  width: 2px;
  border-radius: 2px;
  background: var(--divider);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  width: 12px; height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-100);
}
.timeline__dot--success { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-50); }
.timeline__dot--warning { background: #e59a00; box-shadow: 0 0 0 4px var(--warning-bg); }
.timeline__dot--danger { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); }
.timeline__dot--neutral { background: #a9a5bd; box-shadow: 0 0 0 4px var(--neutral-bg); }
.timeline__title { color: var(--heading); font-size: var(--fs-app); font-weight: var(--fw-medium); line-height: 1.45; }
.timeline__text { color: var(--muted-strong); font-size: var(--fs-sm); }
.timeline__meta { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.timeline--compact { gap: var(--s-2-5); }

/* =================================================================================================
   Pricing (cards + monthly/annual toggle). Container carries data-interval="month|year".
   ================================================================================================= */
.pricing-grid { display: grid; gap: var(--s-2-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099.98px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1-5);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.pricing-card:hover { box-shadow: var(--shadow-md); }
.pricing-card--featured { border: 1.5px solid var(--brand); box-shadow: 0 18px 40px -24px rgba(114, 34, 255, 0.55); }
.pricing-card__flag {
  position: absolute;
  top: -13px;
  inset-inline-start: var(--s-3);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
.pricing-card__name { color: var(--heading); font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--heading);
  font-size: var(--fs-3xl);
  line-height: 1.15;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.pricing-card--featured .pricing-card__price { color: var(--brand-ink); }
.pricing-card__unit { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.pricing-card__note { color: var(--muted-strong); font-size: var(--fs-xs); min-height: 1.5em; }
.pricing-card__features { display: grid; gap: 8px; list-style: none; padding: 0; color: var(--muted-strong); font-size: var(--fs-sm); }
.pricing-card__features li { display: flex; gap: 8px; align-items: flex-start; }
.pricing-card__features .icon { width: 18px; height: 18px; color: var(--success-ink); margin-top: 2px; }
.pricing-card__cta { margin-top: auto; padding-top: var(--s-1); }
[data-interval="month"] [data-show-interval="year"],
[data-interval="year"] [data-show-interval="month"] { display: none !important; }
.pricing-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1-5); }

/* =================================================================================================
   FAQ accordion (<details class="faq__item">)
   ================================================================================================= */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 64px;
  padding: var(--s-2) 0;
  color: var(--heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--lavender) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b14d6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur);
}
.faq__item[open] > .faq__q::after { transform: rotate(45deg); background-color: var(--brand-100); }
.faq__q:hover { color: var(--brand-ink); }
.faq__a { padding: 0 var(--s-6) var(--s-3) 0; color: var(--muted-strong); }
.faq__a > * + * { margin-top: var(--s-1); }

/* =================================================================================================
   Misc: section header, page header, divider with label, list rows, notices
   ================================================================================================= */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.section-head__title { font-size: var(--fs-section); line-height: var(--lh-heading); color: var(--heading); font-weight: var(--fw-medium); }
.section-head__text { margin-top: 6px; color: var(--muted); }
.divider-label { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--fs-sm); }
.divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.list-rows { list-style: none; padding: 0; }
.list-row { display: flex; align-items: center; gap: var(--s-1-5); padding: 12px 0; border-bottom: 1px solid var(--divider); }
.list-row:last-child { border-bottom: 0; }
.list-row__main { flex: 1; min-width: 0; }
.list-row__title { color: var(--heading); font-weight: var(--fw-medium); }
.list-row__meta { color: var(--muted); font-size: var(--fs-xs); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.dot--success { background: var(--accent); }
.dot-sep::before { content: "•"; margin: 0 6px; color: #b6b2c8; }
.ds-swatch { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--muted-strong); }
.ds-swatch__chip { height: 56px; border-radius: 14px; border: 1px solid rgba(3, 2, 46, 0.08); }