/* Foinse K1 component layer. All visual values resolve through tokens.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-paper);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-body);
  line-height: var(--foinse-font-line-body);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-paper);
  font-family: var(--foinse-font-family-ui);
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1 {
  margin-block-end: var(--foinse-space-6);
  font-size: var(--foinse-font-size-heading-1);
  line-height: var(--foinse-font-line-heading-1);
}

h2 {
  margin-block-end: var(--foinse-space-6);
  font-size: var(--foinse-font-size-heading-2);
  line-height: var(--foinse-font-line-heading-2);
}

h3 {
  margin-block-end: var(--foinse-space-4);
  font-size: var(--foinse-font-size-heading-3);
  line-height: var(--foinse-font-line-heading-3);
}

p {
  max-width: 72ch;
  margin-block-end: var(--foinse-space-3);
}

.foinse-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--foinse-button-min-height);
  gap: var(--foinse-space-2);
  padding: 0 var(--foinse-space-4);
  border: var(--foinse-border-width) solid transparent;
  border-radius: var(--foinse-radius-control);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  line-height: var(--foinse-font-line-label);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--foinse-motion-duration-ui) var(--foinse-motion-easing),
    border-color var(--foinse-motion-duration-ui) var(--foinse-motion-easing),
    color var(--foinse-motion-duration-ui) var(--foinse-motion-easing);
}

.foinse-btn:focus-visible,
.foinse-btn.is-focus {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
  transition: none;
}

.foinse-btn--primary,
.foinse-btn--claim {
  color: var(--foinse-color-surface-1);
  background: var(--foinse-color-accent);
  border-color: var(--foinse-color-accent);
}

.foinse-btn--primary:hover,
.foinse-btn--primary.is-hover,
.foinse-btn--claim:hover,
.foinse-btn--claim.is-hover {
  background: var(--foinse-color-accent-hover);
  border-color: var(--foinse-color-accent-hover);
}

.foinse-btn--primary:active,
.foinse-btn--primary.is-active,
.foinse-btn--claim:active,
.foinse-btn--claim.is-active {
  background: var(--foinse-color-accent-active);
  border-color: var(--foinse-color-accent-active);
}

.foinse-btn--secondary {
  color: var(--foinse-color-surface-1);
  background: var(--foinse-color-ink-900);
  border-color: var(--foinse-color-ink-900);
}

.foinse-btn--secondary:hover,
.foinse-btn--secondary.is-hover {
  background: var(--foinse-color-ink-700);
  border-color: var(--foinse-color-ink-700);
}

.foinse-btn--secondary:active,
.foinse-btn--secondary.is-active {
  background: var(--foinse-color-ink-900);
  border-color: var(--foinse-color-ink-900);
}

.foinse-btn--tertiary {
  color: var(--foinse-color-ink-900);
  background: transparent;
  border-color: var(--foinse-color-rule-200);
}

.foinse-btn--tertiary:hover,
.foinse-btn--tertiary.is-hover {
  border-color: var(--foinse-color-ink-300);
}

.foinse-btn--tertiary:active,
.foinse-btn--tertiary.is-active {
  background: var(--foinse-color-rule-100);
  border-color: var(--foinse-color-ink-300);
}

.foinse-btn--destructive,
.foinse-btn.is-error {
  color: var(--foinse-color-surface-1);
  background: var(--foinse-color-error);
  border-color: var(--foinse-color-error);
}

.foinse-btn--destructive:hover,
.foinse-btn--destructive.is-hover,
.foinse-btn--destructive:active,
.foinse-btn--destructive.is-active {
  color: var(--foinse-color-surface-1);
  background: var(--foinse-color-error);
  border-color: var(--foinse-color-ink-900);
}

.foinse-btn--link {
  color: var(--foinse-color-accent);
  background: transparent;
  border-color: transparent;
}

.foinse-btn--link:hover,
.foinse-btn--link.is-hover {
  text-decoration: underline;
  text-decoration-thickness: var(--foinse-border-width);
  text-underline-offset: var(--foinse-focus-offset);
}

.foinse-btn--link:active,
.foinse-btn--link.is-active {
  color: var(--foinse-color-accent-active);
}

.foinse-btn--link:visited {
  color: var(--foinse-color-accent);
}

.foinse-btn--claim {
  width: 100%;
}

.foinse-btn.is-loading,
.foinse-btn[aria-busy="true"] {
  cursor: wait;
}

.foinse-btn.is-loading::before,
.foinse-btn[aria-busy="true"]::before {
  width: var(--foinse-icon-size-inline);
  height: var(--foinse-icon-size-inline);
  flex: 0 0 var(--foinse-icon-size-inline);
  border: var(--foinse-border-width-emphasis) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: foinse-spin var(--foinse-motion-duration-spinner) var(--foinse-motion-easing-linear) infinite;
}

.foinse-btn:disabled,
.foinse-btn[aria-disabled="true"],
.foinse-btn.is-disabled,
.foinse-btn--claim.is-redeemed,
.foinse-btn--claim.is-expired {
  color: var(--foinse-color-ink-300);
  background: var(--foinse-color-rule-200);
  border-color: var(--foinse-color-rule-200);
  cursor: not-allowed;
}

.foinse-btn:disabled:hover,
.foinse-btn[aria-disabled="true"]:hover,
.foinse-btn.is-disabled:hover {
  color: var(--foinse-color-ink-300);
  background: var(--foinse-color-rule-200);
  border-color: var(--foinse-color-rule-200);
  text-decoration: none;
}

.foinse-link {
  color: var(--foinse-color-accent);
  font-family: var(--foinse-font-family-ui);
  font-weight: var(--foinse-font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: var(--foinse-border-width);
  text-underline-offset: var(--foinse-focus-offset);
  overflow-wrap: anywhere;
  cursor: pointer;
}

.foinse-link--inline,
.foinse-link--reversal {
  text-decoration: none;
}

.foinse-link--quiet,
.foinse-link--reversal {
  color: var(--foinse-color-ink-700);
  font-weight: var(--foinse-font-weight-regular);
}

.foinse-link:hover,
.foinse-link.is-hover,
.foinse-link--inline:hover,
.foinse-link--inline.is-hover,
.foinse-link--reversal:hover,
.foinse-link--reversal.is-hover {
  text-decoration: underline;
}

.foinse-link--standalone:hover,
.foinse-link--standalone.is-hover,
.foinse-link--quiet:hover,
.foinse-link--quiet.is-hover {
  color: var(--foinse-color-ink-900);
}

.foinse-link:active,
.foinse-link.is-active {
  color: var(--foinse-color-accent-active);
}

.foinse-link:focus-visible,
.foinse-link.is-focus {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
  text-decoration: underline;
}

.foinse-link:visited {
  color: inherit;
}

.foinse-link[aria-disabled="true"],
.foinse-link.is-disabled {
  color: var(--foinse-color-ink-500);
  text-decoration: none;
  cursor: not-allowed;
}

.foinse-link.is-loading,
.foinse-link[aria-busy="true"] {
  color: var(--foinse-color-ink-500);
  text-decoration: none;
  cursor: wait;
}

.foinse-link.is-loading::after,
.foinse-link[aria-busy="true"]::after {
  display: inline-block;
  width: var(--foinse-space-3);
  height: var(--foinse-space-3);
  margin-left: var(--foinse-space-1);
  border: var(--foinse-border-width) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  content: "";
  animation: foinse-spin var(--foinse-motion-duration-spinner) var(--foinse-motion-easing-linear) infinite;
}

.foinse-field {
  display: grid;
  gap: var(--foinse-space-1);
  color: var(--foinse-color-ink-900);
  font-family: var(--foinse-font-family-ui);
}

.foinse-label {
  color: inherit;
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  line-height: var(--foinse-font-line-label);
}

.foinse-input,
.foinse-select,
.foinse-textarea {
  width: 100%;
  min-height: var(--foinse-input-height);
  padding: 0 var(--foinse-space-4);
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-control);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-body);
  font-weight: var(--foinse-font-weight-regular);
  line-height: var(--foinse-font-line-body);
  transition: border-color var(--foinse-motion-duration-ui) var(--foinse-motion-easing),
    background-color var(--foinse-motion-duration-ui) var(--foinse-motion-easing);
}

.foinse-input::placeholder,
.foinse-textarea::placeholder {
  color: var(--foinse-color-ink-500);
  opacity: 1;
}

.foinse-input:hover,
.foinse-select:hover,
.foinse-textarea:hover,
.foinse-input.is-hover,
.foinse-select.is-hover,
.foinse-textarea.is-hover,
.foinse-field.is-hover .foinse-input,
.foinse-field.is-hover .foinse-select,
.foinse-field.is-hover .foinse-textarea {
  border-color: var(--foinse-color-ink-300);
}

.foinse-input:focus-visible,
.foinse-select:focus-visible,
.foinse-textarea:focus-visible,
.foinse-input.is-focus,
.foinse-select.is-focus,
.foinse-textarea.is-focus,
.foinse-field.is-focus .foinse-input,
.foinse-field.is-focus .foinse-select,
.foinse-field.is-focus .foinse-textarea {
  border-color: var(--foinse-color-accent);
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
  transition: none;
}

.foinse-input:active,
.foinse-select:active,
.foinse-textarea:active,
.foinse-input.is-active,
.foinse-select.is-active,
.foinse-textarea.is-active,
.foinse-field.is-active .foinse-input,
.foinse-field.is-active .foinse-select,
.foinse-field.is-active .foinse-textarea {
  border-color: var(--foinse-color-accent-active);
}

.foinse-input[type="number"],
.foinse-input.is-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.foinse-textarea {
  min-height: var(--foinse-textarea-min-height);
  padding-top: var(--foinse-space-3);
  padding-bottom: var(--foinse-space-3);
  resize: vertical;
}

.foinse-field.is-error,
.foinse-field:has([aria-invalid="true"]) {
  color: var(--foinse-color-error);
}

.foinse-field.is-error .foinse-input,
.foinse-field.is-error .foinse-select,
.foinse-field.is-error .foinse-textarea,
.foinse-input[aria-invalid="true"],
.foinse-select[aria-invalid="true"],
.foinse-textarea[aria-invalid="true"] {
  border-color: var(--foinse-color-error);
}

.foinse-field__error {
  margin: 0;
  color: var(--foinse-color-error);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-regular);
  line-height: var(--foinse-font-line-label);
}

.foinse-input:disabled,
.foinse-select:disabled,
.foinse-textarea:disabled,
.foinse-input[aria-disabled="true"],
.foinse-select[aria-disabled="true"],
.foinse-textarea[aria-disabled="true"],
.foinse-field.is-disabled .foinse-input,
.foinse-field.is-disabled .foinse-select,
.foinse-field.is-disabled .foinse-textarea {
  color: var(--foinse-color-ink-300);
  background: var(--foinse-color-paper);
  border-color: var(--foinse-color-rule-200);
  cursor: not-allowed;
}

.foinse-field.is-loading {
  color: var(--foinse-color-ink-500);
}

.foinse-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--foinse-space-2);
  min-height: var(--foinse-hit-area-touch);
  color: var(--foinse-color-ink-900);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-body);
  line-height: var(--foinse-font-line-body);
  cursor: pointer;
}

.foinse-checkbox__control {
  appearance: none;
  width: var(--foinse-checkbox-size);
  height: var(--foinse-checkbox-size);
  flex: 0 0 var(--foinse-checkbox-size);
  margin-top: var(--foinse-space-1);
  background: var(--foinse-color-surface-1);
  display: grid;
  place-items: center;
  border: var(--foinse-border-width-emphasis) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-badge);
}

.foinse-checkbox:hover .foinse-checkbox__control,
.foinse-checkbox.is-hover .foinse-checkbox__control {
  border-color: var(--foinse-color-ink-300);
}

.foinse-checkbox__control:focus-visible,
.foinse-checkbox.is-focus .foinse-checkbox__control {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

.foinse-checkbox__control:checked,
.foinse-checkbox.is-active .foinse-checkbox__control {
  background: var(--foinse-color-accent);
  border-color: var(--foinse-color-accent);
}

.foinse-checkbox__control:checked::after,
.foinse-checkbox.is-active .foinse-checkbox__control::after {
  color: var(--foinse-color-surface-1);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-semibold);
  line-height: 1;
  content: "\2713";
}

.foinse-checkbox.is-error {
  color: var(--foinse-color-error);
}

.foinse-checkbox.is-error .foinse-checkbox__control,
.foinse-checkbox__control[aria-invalid="true"] {
  border-color: var(--foinse-color-error);
}

.foinse-checkbox.is-disabled,
.foinse-checkbox:has(.foinse-checkbox__control:disabled) {
  color: var(--foinse-color-ink-300);
  cursor: not-allowed;
}

.foinse-card {
  display: block;
  padding: var(--foinse-space-6);
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  font-family: var(--foinse-font-family-ui);
  transition: border-color var(--foinse-motion-duration-ui) var(--foinse-motion-easing),
    background-color var(--foinse-motion-duration-ui) var(--foinse-motion-easing);
}

.foinse-card:hover,
.foinse-card.is-hover {
  border-color: var(--foinse-color-ink-300);
}

.foinse-card:focus-visible,
.foinse-card.is-focus {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

.foinse-card:active,
.foinse-card.is-active {
  border-color: var(--foinse-color-accent);
}

.foinse-card.is-disabled,
.foinse-card[aria-disabled="true"] {
  color: var(--foinse-color-ink-300);
  background: var(--foinse-color-rule-100);
  cursor: not-allowed;
}

.foinse-card.is-error,
.foinse-card--claim.is-invalid,
.foinse-card--split.is-error {
  border-color: var(--foinse-color-error);
}

.foinse-card.is-loading,
.foinse-card[aria-busy="true"] {
  cursor: wait;
}

.foinse-card__title {
  margin: 0 0 var(--foinse-space-3);
  font-size: var(--foinse-font-size-heading-3);
  font-weight: var(--foinse-font-weight-semibold);
  line-height: var(--foinse-font-line-heading-3);
}

.foinse-card__value,
.foinse-card__price {
  font-family: var(--foinse-font-family-mono);
  font-variant-numeric: tabular-nums;
}

.foinse-card__meta {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
}

.foinse-card--reserve {
  border-left: var(--foinse-border-width-emphasis) solid var(--foinse-color-reserve);
}

.foinse-card--reserve.is-collapsed > :not(.foinse-card__title) {
  display: none;
}

.foinse-card--claim.is-redeemed {
  border-color: var(--foinse-color-reserve);
}

.foinse-card--claim.is-expired {
  color: var(--foinse-color-ink-500);
}

.foinse-skeleton {
  min-height: var(--foinse-space-4);
  background: var(--foinse-color-rule-100);
  border-radius: var(--foinse-radius-badge);
  opacity: var(--foinse-opacity-skeleton);
  animation: foinse-skeleton var(--foinse-motion-duration-skeleton) var(--foinse-motion-easing) infinite alternate;
}

.foinse-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
}

.foinse-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-surface-1);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-body);
  line-height: var(--foinse-font-line-body);
}

.foinse-table th,
.foinse-table td {
  min-height: var(--foinse-table-row-height);
  padding: var(--foinse-space-3) var(--foinse-space-4);
  border: 0;
  border-bottom: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  text-align: left;
  vertical-align: middle;
}

.foinse-table th {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  line-height: var(--foinse-font-line-label);
}

.foinse-table tbody tr:nth-child(even) {
  background: var(--foinse-color-rule-100);
}

.foinse-table tbody tr:last-child td {
  border-bottom: 0;
}

.foinse-table--bare tbody tr:nth-child(even) {
  background: transparent;
}

.foinse-table .is-numeric,
.foinse-table [data-numeric] {
  font-family: var(--foinse-font-family-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.foinse-table tbody tr:hover,
.foinse-table tbody tr.is-hover {
  background: var(--foinse-color-rule-100);
}

.foinse-table tbody tr:focus-visible,
.foinse-table tbody tr.is-focus {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: calc(var(--foinse-focus-width) * -1);
}

.foinse-table tbody tr:active,
.foinse-table tbody tr.is-active {
  background: var(--foinse-color-rule-200);
}

.foinse-table tbody tr.is-disabled,
.foinse-table tbody tr[aria-disabled="true"],
.foinse-table tbody tr.is-out-of-stock {
  color: var(--foinse-color-ink-300);
  background: var(--foinse-color-paper);
}

.foinse-table tbody tr.is-error,
.foinse-table.is-error {
  color: var(--foinse-color-error);
}

.foinse-table tbody tr.is-error td {
  border-bottom-color: var(--foinse-color-error);
}

.foinse-table.is-loading tbody,
.foinse-table[aria-busy="true"] tbody {
  color: var(--foinse-color-ink-500);
  background: var(--foinse-color-rule-100);
}

.foinse-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--foinse-space-6);
  padding: var(--foinse-space-1) var(--foinse-space-2);
  color: var(--foinse-color-ink-700);
  background: var(--foinse-color-rule-100);
  border: var(--foinse-border-width) solid transparent;
  border-radius: var(--foinse-radius-badge);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  line-height: var(--foinse-font-line-label);
}

.foinse-badge--reserve {
  color: var(--foinse-color-reserve);
  background: var(--foinse-color-reserve-tint);
}

.foinse-badge--savings {
  color: var(--foinse-color-accent);
  background: var(--foinse-color-accent-tint);
}

.foinse-badge:hover,
.foinse-badge.is-hover {
  border-color: currentColor;
}

.foinse-badge:focus-visible,
.foinse-badge.is-focus {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

.foinse-badge:active,
.foinse-badge.is-active {
  color: var(--foinse-color-ink-900);
  border-color: var(--foinse-color-ink-900);
}

.foinse-badge.is-disabled,
.foinse-badge[aria-disabled="true"] {
  color: var(--foinse-color-ink-300);
  background: var(--foinse-color-rule-100);
  border-color: var(--foinse-color-rule-200);
}

.foinse-badge.is-loading,
.foinse-badge[aria-busy="true"] {
  color: transparent;
  background: var(--foinse-color-rule-100);
}

.foinse-badge.is-error {
  color: var(--foinse-color-error);
  background: var(--foinse-color-error-tint);
  border-color: var(--foinse-color-error);
}

.foinse-tabs {
  display: flex;
  align-items: stretch;
  min-height: var(--foinse-mobile-control-height);
  gap: var(--foinse-space-2);
  border-bottom: var(--foinse-border-width) solid var(--foinse-color-rule-200);
}

.foinse-tab {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--foinse-mobile-control-height);
  padding: 0 var(--foinse-space-3);
  color: var(--foinse-color-ink-700);
  background: transparent;
  border: 0;
  border-bottom: var(--foinse-border-width-emphasis) solid transparent;
  border-radius: 0;
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  line-height: var(--foinse-font-line-label);
  cursor: pointer;
}

.foinse-tab:hover,
.foinse-tab.is-hover {
  color: var(--foinse-color-ink-900);
  border-bottom-color: var(--foinse-color-ink-300);
}

.foinse-tab:focus-visible,
.foinse-tab.is-focus {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

.foinse-tab:active,
.foinse-tab.is-active,
.foinse-tab[aria-selected="true"] {
  color: var(--foinse-color-accent);
  border-bottom-color: var(--foinse-color-accent);
}

.foinse-tab.is-complete::before {
  margin-right: var(--foinse-space-1);
  color: var(--foinse-color-reserve);
  content: "\2713";
}

.foinse-tab:disabled,
.foinse-tab[aria-disabled="true"],
.foinse-tab.is-disabled,
.foinse-tab.is-locked {
  color: var(--foinse-color-ink-300);
  border-bottom-color: transparent;
  cursor: not-allowed;
}

.foinse-tab.is-loading,
.foinse-tab[aria-busy="true"] {
  color: var(--foinse-color-ink-500);
  cursor: wait;
}

.foinse-tab.is-error {
  color: var(--foinse-color-error);
  border-bottom-color: var(--foinse-color-error);
}

.foinse-tabs--vertical {
  flex-direction: column;
  border-right: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-bottom: 0;
}

.foinse-tabs--vertical .foinse-tab {
  justify-content: flex-start;
  border-right: var(--foinse-border-width-emphasis) solid transparent;
  border-bottom: 0;
}

.foinse-tabs--vertical .foinse-tab.is-active,
.foinse-tabs--vertical .foinse-tab[aria-selected="true"] {
  border-right-color: var(--foinse-color-accent);
}

.foinse-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--foinse-space-3);
  width: 100%;
  padding: var(--foinse-space-4);
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-left: var(--foinse-border-width-emphasis) solid var(--foinse-color-accent);
  border-radius: var(--foinse-radius-control);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-body);
  line-height: var(--foinse-font-line-body);
}

.foinse-alert--success {
  background: var(--foinse-color-reserve-tint);
  border-left-color: var(--foinse-color-reserve);
}

.foinse-alert--warning {
  background: var(--foinse-color-caution-tint);
  border-left-color: var(--foinse-color-caution);
}

.foinse-alert--error,
.foinse-alert.is-error {
  color: var(--foinse-color-error);
  background: var(--foinse-color-error-tint);
  border-left-color: var(--foinse-color-error);
}

.foinse-alert:hover,
.foinse-alert.is-hover {
  border-color: var(--foinse-color-ink-300);
  border-left-color: var(--foinse-color-accent);
}

.foinse-alert--success:hover,
.foinse-alert--success.is-hover {
  border-left-color: var(--foinse-color-reserve);
}

.foinse-alert--warning:hover,
.foinse-alert--warning.is-hover {
  border-left-color: var(--foinse-color-caution);
}

.foinse-alert--error:hover,
.foinse-alert--error.is-hover,
.foinse-alert.is-error:hover {
  border-left-color: var(--foinse-color-error);
}

.foinse-alert:focus-visible,
.foinse-alert.is-focus {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

.foinse-alert:active,
.foinse-alert.is-active {
  background: var(--foinse-color-rule-100);
}

.foinse-alert.is-disabled,
.foinse-alert[aria-disabled="true"] {
  color: var(--foinse-color-ink-300);
  background: var(--foinse-color-paper);
  border-color: var(--foinse-color-rule-200);
}

.foinse-alert.is-loading,
.foinse-alert[aria-busy="true"] {
  color: var(--foinse-color-ink-500);
  cursor: wait;
}

.gallery-shell {
  width: calc(100% - var(--foinse-space-8));
  max-width: var(--foinse-container-max);
  margin-inline: auto;
  padding-block: var(--foinse-space-12);
  overflow-wrap: anywhere;
}

.gallery-shell > *,
.gallery-grid > *,
.variant-grid > * {
  min-width: 0;
  max-width: 100%;
}

.gallery-header,
.gallery-section {
  margin-bottom: var(--foinse-space-16);
}

.gallery-grid,
.variant-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--foinse-space-4);
}

.specimen {
  display: grid;
  align-content: start;
  gap: var(--foinse-space-3);
  min-width: 0;
  padding: var(--foinse-space-4);
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
}

.specimen-label,
.inapplicable {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
}

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

@keyframes foinse-skeleton {
  from {
    opacity: var(--foinse-opacity-skeleton);
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .foinse-card {
    padding: var(--foinse-space-4);
  }

  .foinse-table-wrap--responsive {
    overflow: visible;
    background: transparent;
    border: 0;
  }

  .foinse-table-wrap--responsive .foinse-table {
    display: none;
  }
}

@media (min-width: 768px) {
  .gallery-grid,
  .variant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ---------------------------------------------------------------------------
   Foinse K2 public identity. The knot, two loops, and four directions are the
   organizing system; individual crossings inherit this shell.
   --------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
}

::selection {
  color: var(--foinse-color-paper);
  background: var(--foinse-color-reserve);
}

.wrap {
  max-width: 1240px;
}

.site-head {
  background: var(--foinse-color-paper);
  border-color: var(--foinse-color-rule-200);
}

.head-row {
  min-height: 72px;
  flex-wrap: nowrap;
}

.brand img {
  width: 174px;
  height: 32px;
}

.site-head nav {
  align-items: center;
  gap: 4px;
}

.site-head nav a {
  min-height: 40px;
  padding: 0 12px;
  color: var(--foinse-color-ink-500);
  border: 1px solid transparent;
  border-radius: var(--foinse-radius-control);
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.site-head nav a:hover,
.site-head nav a[aria-current="page"] {
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-rule-100);
  text-decoration: none;
}

.site-head nav a[aria-current="page"] {
  border-color: var(--foinse-color-rule-200);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-width: 88px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--foinse-color-ink-900);
  background: transparent;
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-control);
  font: 500 13px/1 var(--foinse-font-family-mono);
}

.hero {
  padding-block: clamp(72px, 10vw, 136px);
  border-color: var(--foinse-color-rule-200);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  align-items: center;
  gap: clamp(48px, 8vw, 112px);
}

.hero h1 {
  max-width: 18ch;
  margin-bottom: 28px;
  font-size: clamp(42px, 6vw, var(--foinse-font-size-display));
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.eyebrow {
  color: var(--foinse-color-reserve);
  font-family: var(--foinse-font-family-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lede {
  max-width: 58ch;
  color: var(--foinse-color-ink-700);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
}

.hero-note {
  max-width: 62ch;
  margin-top: 32px;
  color: var(--foinse-color-ink-500);
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
}

.knot-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 420px;
  margin-inline: auto;
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: 24px;
  background: var(--foinse-color-surface-1);
}

.knot-stage::before,
.knot-stage::after {
  position: absolute;
  background: var(--foinse-color-rule-200);
  content: "";
}

.knot-stage::before {
  width: 1px;
  height: 100%;
}

.knot-stage::after {
  width: 100%;
  height: 1px;
}

.knot-stage img,
.knot-stage svg {
  position: relative;
  z-index: 1;
  width: 68%;
  height: 68%;
}

.knot-node {
  position: absolute;
  z-index: 2;
  padding: 4px 7px;
  color: var(--foinse-color-ink-700);
  background: var(--foinse-color-paper);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: 4px;
  font: 600 11px/1 var(--foinse-font-family-mono);
  letter-spacing: 0.08em;
}

.knot-node--top { top: 18px; left: 50%; transform: translateX(-50%); }
.knot-node--right { right: 18px; top: 50%; transform: translateY(-50%); }
.knot-node--bottom { bottom: 18px; left: 50%; transform: translateX(-50%); }
.knot-node--left { left: 18px; top: 50%; transform: translateY(-50%); }

.system-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--foinse-color-ink-500);
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
}

.system-line strong {
  color: var(--foinse-color-ink-900);
}

.system-line span {
  color: var(--foinse-color-reserve);
}

.foinse-section {
  padding-block: clamp(72px, 9vw, 112px);
  border-color: var(--foinse-color-rule-200);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}

.section-heading h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.section-heading p {
  margin: 0;
  color: var(--foinse-color-ink-700);
  font-size: 18px;
  line-height: 1.6;
}

.loop-grid,
.crossing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.loop-card,
.crossing-card {
  min-height: 300px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
}

.loop-card:first-child {
  border-top: 3px solid var(--foinse-color-reserve);
}

.loop-card:last-child {
  border-top: 3px solid var(--foinse-color-accent);
}

.loop-card__index,
.crossing-card__index {
  display: block;
  margin-bottom: 56px;
  color: var(--foinse-color-ink-500);
  font: 600 12px/1 var(--foinse-font-family-mono);
  letter-spacing: 0.14em;
}

.loop-card h3,
.crossing-card h3 {
  margin: 0 0 14px;
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.loop-card p,
.crossing-card p {
  color: var(--foinse-color-ink-700);
}

.loop-actions {
  margin-top: 28px;
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
}

.direction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  overflow: hidden;
}

.direction-grid > div {
  min-height: 168px;
  padding: 24px;
  background: var(--foinse-color-surface-1);
  border-right: 1px solid var(--foinse-color-rule-200);
}

.direction-grid > div:last-child {
  border-right: 0;
}

.direction-grid strong {
  display: block;
  margin-bottom: 56px;
  color: var(--foinse-color-reserve);
  font: 600 20px/1 var(--foinse-font-family-mono);
}

.direction-grid span {
  color: var(--foinse-color-ink-700);
  font-size: 14px;
}

.grammar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--foinse-color-rule-200);
}

.grammar-grid > div {
  padding: 24px 20px 0 0;
}

.grammar-grid b {
  display: block;
  margin-bottom: 8px;
  color: var(--foinse-color-ink-900);
  font: 600 13px/1.2 var(--foinse-font-family-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.grammar-grid p {
  color: var(--foinse-color-ink-500);
  font-size: 14px;
  line-height: 1.55;
}

.proof-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 28px;
  background: var(--foinse-color-reserve-tint);
  border: 1px solid var(--foinse-color-reserve);
  border-radius: var(--foinse-radius-card);
}

.proof-rail h2,
.proof-rail p {
  margin: 0;
}

.proof-rail p {
  margin-top: 8px;
  color: var(--foinse-color-ink-700);
}

.foinse-btn {
  border-radius: 7px;
}

.foinse-btn--primary,
.foinse-btn--claim {
  color: var(--foinse-color-paper);
}

.foinse-block,
.foinse-strip,
.foinse-split__col {
  background: var(--foinse-color-surface-1);
}

footer {
  background: var(--foinse-color-paper);
  border-color: var(--foinse-color-rule-200);
  padding-block: 72px 36px;
}

.foot-brand img {
  width: 174px;
  height: 32px;
}

@media (max-width: 900px) {
  .hero-grid,
  .section-heading {
    grid-template-columns: 1fr;
  }

  .knot-stage {
    width: min(100%, 420px);
  }

  .direction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .direction-grid > div:nth-child(2) {
    border-right: 0;
  }

  .direction-grid > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--foinse-color-rule-200);
  }

  .grammar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .head-row {
    min-height: 64px;
  }

  .brand img,
  .foot-brand img {
    width: 143px;
    height: auto;
  }

  .hero {
    padding-block: 64px 72px;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .loop-grid,
  .crossing-grid,
  .proof-rail {
    grid-template-columns: 1fr;
  }

  .loop-card,
  .crossing-card {
    min-height: 260px;
  }

  .direction-grid,
  .grammar-grid {
    grid-template-columns: 1fr;
  }

  .direction-grid > div,
  .direction-grid > div:nth-child(2) {
    min-height: 132px;
    border-right: 0;
    border-bottom: 1px solid var(--foinse-color-rule-200);
  }

  .direction-grid > div:last-child {
    border-bottom: 0;
  }

  .direction-grid strong,
  .loop-card__index,
  .crossing-card__index {
    margin-bottom: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Primitive modifiers the gallery specimens reference. DESIGN_SYSTEM_SPEC
   sections 6.1 to 6.6. Every value resolves through tokens.css.
   --------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.foinse-mono {
  font-family: var(--foinse-font-family-mono);
  font-variant-numeric: var(--foinse-font-feature-numeric);
  font-size: var(--foinse-font-size-mono);
  line-height: var(--foinse-font-line-mono);
}

.foinse-numeric {
  font-family: var(--foinse-font-family-mono);
  font-variant-numeric: var(--foinse-font-feature-numeric);
  text-align: right;
}

.foinse-caption {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
}

.foinse-spinner {
  display: inline-block;
  width: var(--foinse-icon-size-inline);
  height: var(--foinse-icon-size-inline);
  border: var(--foinse-icon-stroke-large) solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: foinse-spin var(--foinse-motion-duration-spinner) var(--foinse-motion-easing-linear) infinite;
}

.foinse-badge--credit,
.foinse-badge--fee,
.foinse-badge--license,
.foinse-badge--patent {
  background: var(--foinse-color-rule-100);
  color: var(--foinse-color-ink-700);
}

.foinse-alert--info {
  background: var(--foinse-color-rule-100);
  border-color: var(--foinse-color-rule-200);
  color: var(--foinse-color-ink-900);
}

.foinse-badge--live {
  background: var(--foinse-color-accent-tint);
  color: var(--foinse-color-accent);
}

.foinse-card--balance {
  display: grid;
  gap: var(--foinse-space-1);
}

.foinse-card--marketplace {
  display: grid;
  gap: var(--foinse-space-2);
}

.foinse-field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--foinse-space-2);
}

.foinse-input--number {
  font-variant-numeric: var(--foinse-font-feature-numeric);
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Structural elements. DESIGN_SYSTEM_SPEC section 12: header, navigation,
   footer. The class names match the legal pages so the shell is one contract.
   --------------------------------------------------------------------------- */

.skip,
.skip-link {
  position: absolute;
  left: var(--foinse-space-4);
  top: calc(var(--foinse-space-4) * -4);
  z-index: var(--foinse-z-toast);
  padding: var(--foinse-space-2) var(--foinse-space-4);
  background: var(--foinse-color-accent);
  color: var(--foinse-color-surface-1);
  border-radius: var(--foinse-radius-control);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  text-decoration: none;
}

.skip:focus,
.skip-link:focus {
  top: var(--foinse-space-4);
}

.wrap {
  width: 100%;
  max-width: var(--foinse-container-max);
  margin-inline: auto;
  padding-inline: var(--foinse-container-gutter-at-390);
}

.site-head {
  position: sticky;
  top: 0;
  z-index: var(--foinse-z-sticky);
  background: var(--foinse-color-surface-1);
  border-bottom: var(--foinse-border-width) solid var(--foinse-color-rule-200);
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--foinse-space-3);
  min-height: var(--foinse-space-12);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--foinse-hit-area-touch);
  text-decoration: none;
}

.brand img,
.brand-mark {
  display: block;
}

.site-head nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--foinse-space-2) var(--foinse-space-4);
}

.site-head nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--foinse-hit-area-touch);
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  text-decoration: none;
}

.site-head nav a:hover {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-head nav a[aria-current="page"] {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-head nav a:focus-visible,
.brand:focus-visible,
.skip:focus-visible,
.skip-link:focus-visible {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

[aria-current="page"] {
  font-weight: var(--foinse-font-weight-medium);
}

footer {
  border-top: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  background: var(--foinse-color-surface-1);
  padding-block: var(--foinse-space-12) var(--foinse-space-8);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--foinse-space-8);
  margin-bottom: var(--foinse-space-8);
}

.foot-brand {
  margin-block-end: var(--foinse-space-3);
}

.foot-head {
  margin-block-end: var(--foinse-space-2);
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
}

.foot-line {
  margin-block-end: var(--foinse-space-2);
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
  max-width: 44ch;
}

.foot-line a {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-line a:focus-visible,
.copyright a:focus-visible {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

.copyright {
  margin: 0;
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
}

/* ---------------------------------------------------------------------------
   Page patterns. DESIGN_SYSTEM_SPEC section 11: headline, one supporting
   sentence, one primary CTA, one secondary text link, then claim blocks.
   --------------------------------------------------------------------------- */

.hero {
  padding-block: var(--foinse-space-12) var(--foinse-space-16);
  border-bottom: var(--foinse-border-width) solid var(--foinse-color-rule-200);
}

.hero h1 {
  max-width: 24ch;
  font-size: var(--foinse-font-size-display);
  line-height: var(--foinse-font-line-display);
  font-weight: var(--foinse-font-weight-semibold);
}

.eyebrow {
  margin-block-end: var(--foinse-space-4);
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  font-weight: var(--foinse-font-weight-medium);
  letter-spacing: 0.08em;
}

.lede {
  max-width: 62ch;
  margin-block-end: var(--foinse-space-6);
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-heading-3);
  line-height: var(--foinse-font-line-heading-3);
}

.definition {
  max-width: 72ch;
  margin-block-end: var(--foinse-space-6);
  padding-inline-start: var(--foinse-space-4);
  border-inline-start: var(--foinse-border-width-emphasis) solid var(--foinse-color-rule-200);
  color: var(--foinse-color-ink-700);
}

.hero-cta,
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--foinse-space-3);
}

.cta-row--equal > * {
  flex: 1 1 0;
}

.foinse-section {
  padding-block: var(--foinse-space-16);
  border-bottom: var(--foinse-border-width) solid var(--foinse-color-rule-200);
}

.foinse-section > .wrap > :last-child {
  margin-block-end: 0;
}

.foinse-section h2,
.foinse-section h3 {
  margin-block-start: var(--foinse-space-6);
}

.foinse-section > .wrap > h2:first-child,
.foinse-section > .wrap > h3:first-child {
  margin-block-start: 0;
}

.section-lede {
  max-width: 72ch;
  margin-block-end: var(--foinse-space-8);
  color: var(--foinse-color-ink-700);
}

.foinse-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--foinse-space-4);
  padding: var(--foinse-space-6);
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
}

.foinse-strip p {
  margin: 0;
  max-width: 60ch;
}

.foinse-block {
  max-width: 72ch;
  padding: var(--foinse-space-6);
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
}

.foinse-block p:last-child {
  margin-block-end: 0;
}

.foinse-block--reserve {
  border-inline-start: var(--foinse-border-width-emphasis) solid var(--foinse-color-reserve);
}

.foinse-block--reserve h2,
.foinse-block--reserve h3 {
  margin-block-start: 0;
}

.foinse-reserve-line {
  margin: 0;
  font-family: var(--foinse-font-family-mono);
  font-size: var(--foinse-font-size-mono);
  line-height: var(--foinse-font-line-mono);
  font-variant-numeric: var(--foinse-font-feature-numeric);
}

.foinse-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--foinse-space-4);
  margin-block-end: var(--foinse-space-8);
}

.foinse-split__col {
  padding: var(--foinse-space-6);
  background: var(--foinse-color-surface-1);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
}

.foinse-split__col h3 {
  margin-block-start: 0;
}

.foinse-split__col p:last-child {
  margin-block-end: 0;
}

.foinse-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--foinse-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foinse-steps > li {
  padding-block-start: var(--foinse-space-4);
  border-top: var(--foinse-border-width) solid var(--foinse-color-rule-200);
}

.foinse-step-no {
  display: block;
  margin-block-end: var(--foinse-space-2);
  color: var(--foinse-color-ink-500);
  font-family: var(--foinse-font-family-mono);
  font-size: var(--foinse-font-size-label);
}

.foinse-steps h3 {
  margin-block: 0 var(--foinse-space-2);
}

.foinse-steps p:last-child {
  margin-block-end: 0;
}

.foinse-defs {
  margin: 0;
  max-width: 72ch;
}

.foinse-defs dt {
  margin-block-start: var(--foinse-space-4);
  font-weight: var(--foinse-font-weight-semibold);
}

.foinse-defs dd {
  margin: var(--foinse-space-1) 0 0;
  color: var(--foinse-color-ink-700);
}

.foinse-faq {
  max-width: 72ch;
}

.foinse-faq h3 {
  margin-block-start: var(--foinse-space-6);
}

.foinse-code {
  max-width: 72ch;
  margin-block: var(--foinse-space-4);
  padding: var(--foinse-space-4);
  overflow-x: auto;
  background: var(--foinse-color-rule-100);
  border: var(--foinse-border-width) solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-control);
  font-family: var(--foinse-font-family-mono);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
}

.foinse-code code {
  font-family: inherit;
}

.foinse-copy {
  margin-block: var(--foinse-space-2) var(--foinse-space-6);
}

.foinse-docs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--foinse-space-2) var(--foinse-space-4);
  margin-block-end: var(--foinse-space-8);
  padding-block-end: var(--foinse-space-4);
  border-bottom: var(--foinse-border-width) solid var(--foinse-color-rule-200);
}

.foinse-docs-nav a {
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-label);
  text-decoration: none;
}

.foinse-docs-nav a[aria-current="page"] {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foinse-docs-nav a:focus-visible {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

.foinse-list {
  max-width: 72ch;
  padding-inline-start: var(--foinse-space-6);
}

.foinse-list li {
  margin-block-end: var(--foinse-space-2);
}

.foinse-list--links {
  padding-inline-start: 0;
  list-style: none;
}

.foinse-list--links li {
  margin-block-end: var(--foinse-space-3);
}

.foinse-columns {
  max-width: 72ch;
}

.foinse-columns p {
  max-width: none;
}

.legal-body h2,
.legal-body h3 {
  margin-block-start: var(--foinse-space-6);
}

.legal-body > p {
  max-width: 80ch;
}

.legal-meta {
  margin-block-end: var(--foinse-space-6);
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
}

.foinse-lede-sentence {
  max-width: 62ch;
  margin-block-end: var(--foinse-space-6);
  color: var(--foinse-color-ink-700);
}

main a:not(.foinse-btn):not(.brand) {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

main a:not(.foinse-btn):not(.brand):focus-visible {
  outline: var(--foinse-focus-width) solid var(--foinse-color-accent);
  outline-offset: var(--foinse-focus-offset);
}

@media (min-width: 640px) {
  .wrap {
    padding-inline: var(--foinse-container-gutter-at-640);
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: var(--foinse-container-gutter-at-768);
  }

  .foinse-split {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foinse-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foinse-columns {
    max-width: none;
    column-count: 3;
    column-gap: var(--foinse-space-12);
  }

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

@media (min-width: 1200px) {
  .wrap {
    padding-inline: var(--foinse-container-gutter-at-1200);
  }
}

@media (prefers-reduced-motion: reduce) {
  .foinse-spinner {
    animation: none;
  }

  .skip,
  .skip-link {
    transition: none;
  }
}

/* K2 cascade lock: shared-shell rules intentionally follow legacy component
   declarations until the old gallery layer is retired. */
.wrap { max-width: 1240px; }
.site-head { background: var(--foinse-color-paper); border-color: var(--foinse-color-rule-200); }
.head-row { min-height: 72px; flex-wrap: nowrap; }
.brand img { width: 174px; height: 32px; }
.site-head nav { align-items: center; gap: 4px; }
.site-head nav a {
  min-height: 40px;
  padding: 0 12px;
  color: var(--foinse-color-ink-500);
  border: 1px solid transparent;
  border-radius: var(--foinse-radius-control);
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.site-head nav a:hover,
.site-head nav a[aria-current="page"] {
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-rule-100);
  text-decoration: none;
}
.site-head nav a[aria-current="page"] { border-color: var(--foinse-color-rule-200); }
.hero { padding-block: clamp(72px, 10vw, 136px); border-color: var(--foinse-color-rule-200); }
.hero h1 {
  max-width: 18ch;
  margin-bottom: 28px;
  font-size: clamp(42px, 6vw, var(--foinse-font-size-display));
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.eyebrow {
  color: var(--foinse-color-reserve);
  font-family: var(--foinse-font-family-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lede {
  max-width: 58ch;
  color: var(--foinse-color-ink-700);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
}
.foinse-section { padding-block: clamp(72px, 9vw, 112px); border-color: var(--foinse-color-rule-200); }
.foinse-block, .foinse-strip, .foinse-split__col { background: var(--foinse-color-surface-1); }
.foinse-btn--primary, .foinse-btn--claim { color: var(--foinse-color-paper); }
footer { background: var(--foinse-color-paper); border-color: var(--foinse-color-rule-200); padding-block: 72px 36px; }
.foot-brand img { width: 174px; height: 32px; }

@media (max-width: 560px) {
  .head-row { position: relative; }
  .js-nav .nav-toggle { display: inline-flex; }
  .js-nav .site-head nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 16px;
    right: 16px;
    display: none;
    padding: 12px;
    background: var(--foinse-color-surface-1);
    border: 1px solid var(--foinse-color-rule-200);
    border-radius: var(--foinse-radius-card);
  }
  .js-nav .site-head[data-nav-open] nav { display: grid; }
  .js-nav .site-head nav a { min-height: 48px; padding-inline: 14px; }
  .js-nav .site-head nav a.nav-account--signin { margin-inline-start: 0; }
}

@media (max-width: 640px) {
  .head-row { min-height: 64px; }
  .brand img, .foot-brand img { width: 143px; height: auto; }
  .hero { padding-block: 64px 72px; }
  .hero h1 { font-size: clamp(38px, 12vw, 52px); }
}

/* Pass 4: ordinary product entrances and a quieter company lockup. */
.brand img,
.foot-brand img {
  width: 138px;
  height: 32px;
}

.site-head nav a.nav-account--signin {
  margin-inline-start: 8px;
}

.site-head nav a.nav-account--create {
  color: inherit;
  background: none;
  border-color: transparent;
}

.site-head nav a.nav-account--create:hover,
.site-head nav a.nav-account--create:focus-visible {
  color: var(--foinse-color-ink-900);
  background: none;
}

.plain-route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  overflow: hidden;
}

.plain-route > div {
  min-height: 190px;
  padding: 28px;
  background: var(--foinse-color-surface-1);
  border-inline-end: 1px solid var(--foinse-color-rule-200);
}

.plain-route > div:last-child { border-inline-end: 0; }
.plain-route strong { display: block; margin-bottom: 44px; font-size: 24px; }
.plain-route span { color: var(--foinse-color-ink-700); }

.account-state {
  max-width: 760px;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  background: var(--foinse-color-surface-1);
}

.account-state--wide { max-width: 1040px; }

.account-heading,
.account-section__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--foinse-space-5);
}

.account-job-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--foinse-space-4);
  margin: var(--foinse-space-7) 0;
}

.account-job {
  display: grid;
  gap: var(--foinse-space-3);
  min-height: 190px;
  padding: var(--foinse-space-5);
  color: inherit;
  text-decoration: none;
  background: var(--foinse-color-paper);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
}

.account-job strong { font-size: 22px; }
.account-job span { color: var(--foinse-color-ink-700); }
.account-job b { align-self: end; color: var(--foinse-color-reserve); }

.account-section {
  margin-top: var(--foinse-space-8);
  padding-top: var(--foinse-space-7);
  border-top: 1px solid var(--foinse-color-rule-200);
}

.foinse-advanced { margin-top: var(--foinse-space-5); }
.foinse-advanced > summary { cursor: pointer; color: var(--foinse-color-ink-700); font-weight: 600; }
.foinse-advanced[open] > summary { margin-bottom: var(--foinse-space-5); }
.account-state pre { overflow: auto; padding: var(--foinse-space-4); background: var(--foinse-color-paper); border: 1px solid var(--foinse-color-rule-200); border-radius: var(--foinse-radius-card); }

.account-form {
  display: grid;
  gap: var(--foinse-space-5);
}

.account-form > h2,
.account-form > p {
  margin: 0;
}

.account-form .foinse-btn {
  justify-self: start;
}

.account-form small {
  color: var(--foinse-color-ink-500);
}

.account-coordinates {
  display: grid;
  gap: var(--foinse-space-3);
  margin: var(--foinse-space-6) 0;
}

.account-coordinates div {
  padding: var(--foinse-space-3) 0;
  border-bottom: 1px solid var(--foinse-color-rule-200);
}

.account-coordinates dt {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
}

.account-coordinates dd {
  margin: var(--foinse-space-1) 0 0;
  overflow-wrap: anywhere;
  font-family: var(--foinse-font-family-mono);
}

@media (max-width: 900px) {
  .plain-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plain-route > div:nth-child(2) { border-inline-end: 0; }
  .plain-route > div:nth-child(-n+2) { border-bottom: 1px solid var(--foinse-color-rule-200); }
}

@media (max-width: 640px) {
  .brand img,
  .foot-brand img { width: 124px; height: auto; }
  .plain-route { grid-template-columns: 1fr; }
  .plain-route > div { min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--foinse-color-rule-200); }
  .plain-route > div:last-child { border-bottom: 0; }
  .plain-route strong { margin-bottom: 12px; }
  .account-job-grid { grid-template-columns: 1fr; }
  .account-job { min-height: 0; }
  .account-heading,
  .account-section__heading { align-items: stretch; flex-direction: column; }
}

/* FOOT-MAP: full sitemap footer. Flat like the header bar: hairline rules,
   13px mono links, no decoration. Seven even columns, explicit breakpoints so
   rows stay balanced (7 -> 4+3 -> 2), tighter rhythm than the old grid. */
footer {
  padding-block: 40px 24px;
}

.foot-map {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px 24px;
  margin-bottom: 16px;
}

.foot-map__brand {
  grid-column: 1 / -1;
  max-width: 36ch;
  margin-bottom: 8px;
}

.foot-map__col .foot-head {
  margin-block-end: 6px;
  color: var(--foinse-color-ink-500);
  font-size: 11px;
  font-weight: var(--foinse-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot-map__col .foot-line {
  margin-block-end: 2px;
  max-width: none;
  line-height: 1.4;
}

.foot-map__col .foot-line a {
  color: var(--foinse-color-ink-700);
  font-family: var(--foinse-font-family-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.foot-map__col .foot-line a:hover,
.foot-map__col .foot-line a:focus-visible {
  color: var(--foinse-color-ink-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  justify-content: space-between;
  border-top: 1px solid var(--foinse-color-rule-200);
  padding-top: 12px;
}

.foot-alpha {
  margin: 0;
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  font-family: var(--foinse-font-family-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .foot-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-map__brand { grid-column: 1 / -1; }
}

/* ============================================================
   WARM PASS (consumer fintech layer)
   Direction: warm light, friendly, Coinbase-grade restraint.
   Pill actions, soft lifted cards, generous air, sans nav.
   Wins over the flat "ordinary product" layers above.
   ============================================================ */

/* Actions: pills with a soft lift. */
.foinse-btn {
  border-radius: 999px;
  font-family: var(--foinse-font-family-ui);
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color var(--foinse-duration-ui) ease,
              color var(--foinse-duration-ui) ease,
              border-color var(--foinse-duration-ui) ease,
              box-shadow var(--foinse-duration-ui) ease,
              transform var(--foinse-duration-ui) ease;
}

.foinse-btn--primary,
.foinse-btn--claim {
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.08), 0 4px 12px rgb(22 82 240 / 0.18);
}

.foinse-btn--primary:hover,
.foinse-btn--claim:hover {
  box-shadow: 0 2px 4px rgb(28 25 23 / 0.08), 0 8px 20px rgb(22 82 240 / 0.22);
  transform: translateY(-1px);
}

.foinse-btn--primary:active,
.foinse-btn--claim:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.08);
}

.foinse-btn--secondary {
  color: var(--foinse-color-ink-900);
  background: var(--foinse-color-surface-1);
  border-color: var(--foinse-color-rule-200);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.05);
}

.foinse-btn--secondary:hover {
  border-color: var(--foinse-color-ink-300);
  box-shadow: 0 2px 6px rgb(28 25 23 / 0.08);
}

/* Header: sans links, friendlier rhythm. */
.site-head nav a {
  font-family: var(--foinse-font-family-ui);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0;
}

/* Hero: warm composed panel instead of a bare rule. */
.hero {
  margin-top: var(--foinse-space-6);
  padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 88px);
  background: linear-gradient(160deg, var(--foinse-color-surface-1) 0%, var(--foinse-color-accent-tint) 130%);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: calc(var(--foinse-radius-card) * 1.5);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 12px 32px rgb(28 25 23 / 0.06);
}

.hero h1 {
  max-width: 20ch;
  letter-spacing: -0.03em;
}

.hero .lede {
  color: var(--foinse-color-ink-700);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--foinse-space-4, 16px);
  margin-top: var(--foinse-space-6);
}

/* Cards and blocks: soft lift, warm surfaces. */
.foinse-card,
.foinse-block,
.foinse-strip,
.foinse-split__col,
.account-state,
.account-job {
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 6px 16px rgb(28 25 23 / 0.05);
}

.account-job {
  background: var(--foinse-color-surface-1);
  transition: box-shadow var(--foinse-duration-ui) ease, transform var(--foinse-duration-ui) ease;
}

.account-job:hover {
  box-shadow: 0 2px 4px rgb(28 25 23 / 0.05), 0 12px 24px rgb(28 25 23 / 0.08);
  transform: translateY(-2px);
}

/* Route steps: warm numbered cards. */
.route-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--foinse-space-5);
  padding: 0;
  list-style: none;
  counter-reset: route;
}

.route-steps li {
  counter-increment: route;
  padding: var(--foinse-space-6);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 6px 16px rgb(28 25 23 / 0.05);
  color: var(--foinse-color-ink-700);
  font-size: 15px;
  line-height: 1.55;
}

.route-steps li strong {
  display: block;
  margin-bottom: var(--foinse-space-3, 12px);
  color: var(--foinse-color-ink-900);
  font-size: 20px;
  letter-spacing: -0.01em;
}

.route-steps li strong::before {
  content: counter(route);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  color: var(--foinse-color-accent);
  background: var(--foinse-color-accent-tint);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  vertical-align: 2px;
}

@media (max-width: 900px) {
  .route-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .route-steps { grid-template-columns: 1fr; }
}

/* Loops: warm panels with a tinted header zone. */
.loop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--foinse-space-5);
}

.loop {
  padding: var(--foinse-space-8);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 6px 16px rgb(28 25 23 / 0.05);
}

.loop h3 {
  color: var(--foinse-color-accent);
}

.loop p {
  color: var(--foinse-color-ink-700);
}

@media (max-width: 700px) {
  .loop-grid { grid-template-columns: 1fr; }
}

/* Sections: air between ideas. */
.route-intro,
#route,
#participants,
#proof {
  padding-block: clamp(48px, 7vw, 88px);
  border-top: 1px solid var(--foinse-color-rule-200);
}

.route-intro {
  border-top: 0;
}

.route-intro > h2,
#route > h2,
#participants > h2,
#proof > h2 {
  font-size: var(--foinse-font-size-heading-1);
  letter-spacing: -0.02em;
  margin-bottom: var(--foinse-space-5);
}

.route-intro > p,
#participants > p,
#proof > p {
  max-width: 62ch;
  color: var(--foinse-color-ink-700);
  font-size: 17px;
  line-height: 1.6;
}

/* Footer: sans links to match the header. */
.foot-map__col .foot-line a {
  font-family: var(--foinse-font-family-ui);
  font-size: 14px;
}

/* Inputs: friendlier rounding. */
.foinse-input {
  border-radius: var(--foinse-radius-control);
}

/* Hero stat band: the proof strip inside the warm hero panel. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--foinse-space-5);
  margin: var(--foinse-space-8) 0 0;
  padding-top: var(--foinse-space-6);
  border-top: 1px solid var(--foinse-color-rule-200);
}

.hero-stats dt {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
}

.hero-stats dd {
  margin: 4px 0 0;
  color: var(--foinse-color-ink-900);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 700px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   MARKET HOME warm pass: hero panel, card sections, calm tables.
   ============================================================ */
.market-home {
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 var(--foinse-space-6) var(--foinse-space-8);
}

.market-hero {
  margin-top: var(--foinse-space-6);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  background: linear-gradient(160deg, var(--foinse-color-surface-1) 0%, var(--foinse-color-accent-tint) 130%);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: calc(var(--foinse-radius-card) * 1.5);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 12px 32px rgb(28 25 23 / 0.06);
}

.market-hero__identity {
  margin: 0 0 var(--foinse-space-4, 16px);
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
}

.market-hero h1 {
  margin: 0 0 var(--foinse-space-4, 16px);
  font-size: clamp(34px, 5vw, var(--foinse-font-size-heading-1));
  letter-spacing: -0.02em;
}

.market-hero .lede {
  max-width: 62ch;
  margin: 0;
}

.market-home > section:not(.market-hero) {
  margin-top: var(--foinse-space-6);
  padding: var(--foinse-space-6);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 6px 16px rgb(28 25 23 / 0.05);
}

.market-home > section:not(.market-hero) > h2 {
  margin: 0 0 var(--foinse-space-4, 16px);
  font-size: var(--foinse-font-size-heading-3);
}

.market-home table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--foinse-font-size-label);
}

.market-home th {
  padding: 10px 12px;
  color: var(--foinse-color-ink-500);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--foinse-color-rule-200);
}

.market-home td {
  padding: 12px;
  color: var(--foinse-color-ink-700);
  border-bottom: 1px solid var(--foinse-color-rule-100);
}

.market-home tbody tr:last-child td { border-bottom: 0; }

.market-home form {
  display: grid;
  gap: var(--foinse-space-4, 16px);
  max-width: 480px;
}

.market-home form label {
  display: grid;
  gap: 6px;
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-label);
  font-weight: 550;
}

.market-home form input {
  min-height: 44px;
  padding: 0 14px;
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-control);
  color: var(--foinse-color-ink-900);
  font: inherit;
}

.market-home form input:focus-visible {
  outline: 2px solid var(--foinse-focus-color);
  outline-offset: 1px;
  border-color: var(--foinse-color-accent);
}

.market-home form button {
  justify-self: start;
  min-height: 44px;
  padding: 0 24px;
  color: #fff;
  background: var(--foinse-action-primary-bg-default);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.08), 0 4px 12px rgb(22 82 240 / 0.18);
}

.market-home form button:hover {
  background: var(--foinse-action-primary-bg-hover);
}

/* ============================================================
   PROSE PAGES warm pass: hero panel + card sections.
   Used by processing, pricing, and allied narrative pages.
   ============================================================ */
.page-hero {
  margin-top: var(--foinse-space-6);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  background: linear-gradient(160deg, var(--foinse-color-surface-1) 0%, var(--foinse-color-accent-tint) 130%);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: calc(var(--foinse-radius-card) * 1.5);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 12px 32px rgb(28 25 23 / 0.06);
}

.page-hero h1 {
  margin: 0 0 var(--foinse-space-4, 16px);
  font-size: clamp(34px, 5vw, var(--foinse-font-size-heading-1));
  letter-spacing: -0.02em;
}

.page-hero .lede {
  max-width: 62ch;
  margin: 0;
}

.prose-page > section:not(.page-hero) {
  margin-top: var(--foinse-space-6);
  padding: var(--foinse-space-6);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 6px 16px rgb(28 25 23 / 0.05);
}

.prose-page > section:not(.page-hero) > h2 {
  margin: 0 0 var(--foinse-space-4, 16px);
  font-size: var(--foinse-font-size-heading-2);
  letter-spacing: -0.01em;
}

.prose-page > section:not(.page-hero) > p,
.prose-page > section:not(.page-hero) li {
  max-width: 68ch;
  color: var(--foinse-color-ink-700);
  line-height: 1.6;
}

.prose-page ol,
.prose-page ul {
  padding-inline-start: 22px;
}

.prose-page li + li {
  margin-top: 10px;
}

.prose-page table {
  width: 100%;
  max-width: 720px;
  margin-block: var(--foinse-space-4, 16px);
  border-collapse: collapse;
  font-size: var(--foinse-font-size-label);
}

.prose-page th {
  padding: 10px 12px;
  color: var(--foinse-color-ink-500);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--foinse-color-rule-200);
}

.prose-page td {
  padding: 12px;
  color: var(--foinse-color-ink-700);
  border-bottom: 1px solid var(--foinse-color-rule-100);
}

.prose-page tbody tr:last-child td { border-bottom: 0; }

.prose-page a {
  color: var(--foinse-text-link);
  text-underline-offset: 3px;
}

/* ============================================================
   DOC PAGES warm pass: prose-doc replaces the inline-styled
   doc wrapper. Auth pages get a centered warm card.
   ============================================================ */
.prose-doc {
  max-width: 860px;
  padding-bottom: var(--foinse-space-8);
}

.prose-doc--wide { max-width: 1080px; }

.prose-doc--center {
  text-align: center;
  padding-block: clamp(64px, 10vw, 120px);
}

.prose-doc h2 {
  margin: var(--foinse-space-8) 0 var(--foinse-space-4, 16px);
  padding-top: var(--foinse-space-6);
  border-top: 1px solid var(--foinse-color-rule-200);
  font-size: var(--foinse-font-size-heading-2);
  letter-spacing: -0.01em;
}

.prose-doc .page-hero + h2,
.prose-doc .page-hero + p + h2 {
  border-top: 0;
  padding-top: 0;
}

.prose-doc h3 {
  margin: var(--foinse-space-6) 0 var(--foinse-space-3, 12px);
  font-size: var(--foinse-font-size-heading-3);
}

.prose-doc p,
.prose-doc li {
  max-width: 72ch;
  color: var(--foinse-color-ink-700);
  line-height: 1.65;
}

.prose-doc--center p { margin-inline: auto; }

.prose-doc ul,
.prose-doc ol { padding-inline-start: 22px; }

.prose-doc li + li { margin-top: 8px; }

.prose-doc a {
  color: var(--foinse-text-link);
  text-underline-offset: 3px;
}

.prose-doc table {
  width: 100%;
  margin-block: var(--foinse-space-6);
  border-collapse: collapse;
  font-size: var(--foinse-font-size-label);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  overflow: hidden;
}

.prose-doc th {
  padding: 12px 14px;
  color: var(--foinse-color-ink-500);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--foinse-color-rule-200);
}

.prose-doc td {
  padding: 12px 14px;
  color: var(--foinse-color-ink-700);
  border-bottom: 1px solid var(--foinse-color-rule-100);
}

.prose-doc tbody tr:last-child td,
.prose-doc tr:last-child td { border-bottom: 0; }

.prose-doc code {
  padding: 2px 6px;
  background: var(--foinse-color-rule-100);
  border-radius: 6px;
  font-size: 0.92em;
}

.prose-doc form {
  display: grid;
  gap: var(--foinse-space-4, 16px);
  max-width: 520px;
  margin-block: var(--foinse-space-5);
}

.prose-doc input,
.prose-doc select,
.prose-doc textarea {
  min-height: 44px;
  padding: 0 14px;
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-control);
  color: var(--foinse-color-ink-900);
  font: inherit;
}

.prose-doc button,
.prose-doc input[type="submit"] {
  min-height: 44px;
  padding: 0 24px;
  color: #fff;
  background: var(--foinse-action-primary-bg-default);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.prose-doc button:hover {
  background: var(--foinse-action-primary-bg-hover);
}

/* Auth doors: centered warm card. */
.auth-main {
  display: grid;
  place-items: start center;
  padding-block: clamp(48px, 8vw, 96px);
}

.auth-card {
  width: min(480px, 100%);
  padding: clamp(28px, 5vw, 48px);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: calc(var(--foinse-radius-card) * 1.5);
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 16px 40px rgb(28 25 23 / 0.08);
}

.auth-card h1 {
  margin: 0 0 var(--foinse-space-4, 16px);
  font-size: var(--foinse-font-size-heading-1);
  letter-spacing: -0.02em;
}

.auth-card > p {
  color: var(--foinse-color-ink-700);
  line-height: 1.6;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: var(--foinse-space-6);
}

.auth-card label {
  display: grid;
  gap: 6px;
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-label);
  font-weight: 550;
}

.auth-card input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-control);
  color: var(--foinse-color-ink-900);
  font: inherit;
}

.auth-card input:focus-visible {
  outline: 2px solid var(--foinse-focus-color);
  outline-offset: 1px;
  border-color: var(--foinse-color-accent);
}

.auth-card button {
  min-height: 48px;
  margin-top: 8px;
  color: #fff;
  background: var(--foinse-action-primary-bg-default);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.08), 0 4px 12px rgb(22 82 240 / 0.18);
}

.auth-card button:hover {
  background: var(--foinse-action-primary-bg-hover);
}

/* Closing call to action: the warm accent band that ends the front page. */
.cta-band {
  margin-block: clamp(48px, 7vw, 88px);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 6vw, 88px);
  background: var(--foinse-color-accent-tint);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: calc(var(--foinse-radius-card) * 1.5);
  text-align: center;
}

.cta-band h2 {
  margin: 0 0 var(--foinse-space-4, 16px);
  font-size: clamp(30px, 4vw, var(--foinse-font-size-heading-1));
  letter-spacing: -0.02em;
}

.cta-band p {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--foinse-color-ink-700);
  font-size: 17px;
  line-height: 1.6;
}

.cta-band .hero-actions {
  justify-content: center;
}

/* Grant quote (license page): warm blockquote card. */
.grant-quote {
  margin: 0 0 var(--foinse-space-4, 16px);
  padding: 18px 22px;
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-left: 3px solid var(--foinse-color-accent);
  border-radius: var(--foinse-radius-control);
}

.grant-quote p {
  margin: 0;
  max-width: 72ch;
  color: var(--foinse-color-ink-700);
}

/* Terminology index: the in-page jump links read as pills, not a run-on. */
.terminology-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--foinse-space-5);
}

.terminology-index a {
  padding: 8px 16px;
  color: var(--foinse-color-ink-700);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: 999px;
  font-size: var(--foinse-font-size-label);
  font-weight: 550;
  text-decoration: none;
}

.terminology-index a:hover,
.terminology-index a:focus-visible {
  color: var(--foinse-color-accent);
  border-color: var(--foinse-color-accent);
}

/* ============================================================
   HOMEPAGE ELEVATION PASS (2026-10-07): split hero, route
   visual, provider chips, loop icons, gradient CTA. Appended
   last so these rules close out the cascade.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 420px at 88% -10%, rgb(22 82 240 / 0.14), transparent 62%),
    radial-gradient(560px 380px at -6% 108%, rgb(15 157 88 / 0.10), transparent 60%),
    linear-gradient(160deg, var(--foinse-color-surface-1) 0%, var(--foinse-color-accent-tint) 140%);
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.provider-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--foinse-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.provider-chips li {
  padding: 6px 14px;
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: 999px;
  color: var(--foinse-color-ink-700);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.05);
}

/* Route visual: the whole product story in one card. */
.hero-visual {
  position: relative;
}

.route-card {
  position: relative;
  padding: var(--foinse-space-6) var(--foinse-space-6) var(--foinse-space-5);
  background: var(--foinse-color-surface-1);
  border: 1px solid var(--foinse-color-rule-200);
  border-radius: var(--foinse-radius-card);
  box-shadow: 0 2px 4px rgb(28 25 23 / 0.05), 0 20px 44px rgb(28 25 23 / 0.10);
}

.route-card__title {
  margin: 0 0 var(--foinse-space-4, 16px);
  color: var(--foinse-color-ink-900);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.route-card__flow {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.route-card__flow li {
  position: relative;
  display: grid;
  gap: 3px;
  padding-left: 34px;
  counter-increment: flow;
}

.route-card__flow li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--foinse-color-accent);
  background: var(--foinse-color-accent-tint);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.route-card__flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10.5px;
  top: 28px;
  bottom: -10px;
  width: 1.5px;
  background: var(--foinse-color-rule-200);
}

.flow-chip {
  display: inline-block;
  width: fit-content;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.flow-chip--provider { color: var(--foinse-color-ink-900); background: var(--foinse-color-rule-100); }
.flow-chip--toll { color: var(--foinse-color-accent); background: var(--foinse-color-accent-tint); }
.flow-chip--credit { color: var(--foinse-color-reserve); background: var(--foinse-color-reserve-tint); }
.flow-chip--settle { color: var(--foinse-color-ink-900); background: linear-gradient(90deg, var(--foinse-color-accent-tint), var(--foinse-color-reserve-tint)); }

.flow-note {
  color: var(--foinse-color-ink-500);
  font-size: 13px;
  line-height: 1.45;
}

.route-card__foot {
  margin: var(--foinse-space-5) 0 0;
  padding-top: var(--foinse-space-4, 16px);
  border-top: 1px solid var(--foinse-color-rule-100);
  color: var(--foinse-color-ink-500);
  font-size: 12.5px;
}

.receipt-card {
  position: absolute;
  right: -14px;
  bottom: -26px;
  width: min(260px, 78%);
  padding: 14px 18px;
  background: var(--foinse-color-ink-900);
  border-radius: var(--foinse-radius-control);
  box-shadow: 0 16px 36px rgb(28 25 23 / 0.28);
}

.receipt-card__tag {
  margin: 0 0 4px;
  color: var(--foinse-color-reserve-hover, #2CB572);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.receipt-card__line {
  margin: 0;
  color: var(--foinse-color-surface-1);
  font-size: 13.5px;
  line-height: 1.45;
}

.receipt-card__meta {
  margin: 6px 0 0;
  color: var(--foinse-color-ink-300);
  font-size: 11.5px;
}

/* Loop icons. */
.loop-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--foinse-space-4, 16px);
  color: var(--foinse-color-accent);
  background: var(--foinse-color-accent-tint);
  border-radius: 12px;
}

.loop-icon--reserve {
  color: var(--foinse-color-reserve);
  background: var(--foinse-color-reserve-tint);
}

/* CTA band: deep gradient, inverse type. */
.cta-band {
  background:
    radial-gradient(640px 320px at 12% -20%, rgb(61 111 245 / 0.35), transparent 60%),
    radial-gradient(560px 300px at 96% 120%, rgb(15 157 88 / 0.28), transparent 58%),
    linear-gradient(150deg, #141210 0%, #1C1917 55%, #23201C 100%);
  border-color: transparent;
}

.cta-band h2 {
  color: var(--foinse-color-surface-1);
}

.cta-band p {
  color: var(--foinse-color-ink-300);
}

.cta-band .foinse-btn--secondary {
  color: var(--foinse-color-surface-1);
  background: transparent;
  border-color: rgb(251 250 247 / 0.35);
}

.cta-band .foinse-btn--secondary:hover {
  background: rgb(251 250 247 / 0.08);
  border-color: rgb(251 250 247 / 0.55);
}

/* Hero stats: calm numerals, no mobile crowding. */
.hero-stats dd {
  font-size: clamp(20px, 2.2vw, 24px);
  white-space: nowrap;
}

@media (max-width: 1020px) {
  .hero-main { grid-template-columns: 1fr; }
  .hero-visual { margin-top: var(--foinse-space-4, 16px); margin-bottom: 26px; }
  .receipt-card { right: 8px; }
}

@media (max-width: 560px) {
  .receipt-card { position: static; width: auto; margin-top: 12px; }
  .hero-visual { margin-bottom: 0; }
}

/* Receipt overlap fix: keep the route-card footer clear of the
   floating receipt stub. */
.route-card__foot {
  max-width: 58%;
}

@media (max-width: 1020px) {
  .route-card__foot { max-width: 100%; padding-right: 0; }
  .receipt-card { position: static; width: auto; margin-top: var(--foinse-space-4, 16px); }
  .hero-visual { margin-bottom: 0; }
}

/* Receipt overlap fix v2: reserve dead space at the card base
   instead of narrowing the footer line. */
@media (min-width: 1021px) {
  .route-card { padding-bottom: 64px; }
  .route-card__foot { max-width: 100%; }
  .receipt-card { bottom: -20px; right: -10px; }
}

@media (min-width: 1021px) {
  .route-card { padding-bottom: 104px; }
  .route-card__foot { position: absolute; left: var(--foinse-space-6); right: var(--foinse-space-6); bottom: 70px; margin: 0; padding-top: 10px; }
  .receipt-card { bottom: -18px; right: 12px; width: 240px; }
}

/* Receipt overlap fix v3: static placement with a negative
   margin lift. No absolute geometry, no possible cover. */
@media (min-width: 1021px) {
  .route-card { padding-bottom: var(--foinse-space-5); }
  .route-card__foot { position: static; margin-top: var(--foinse-space-5); }
  .receipt-card {
    position: relative;
    inset: auto;
    width: 250px;
    margin: -30px 6px 0 auto;
  }
  .hero-visual { padding-bottom: 8px; }
}

@media (min-width: 1021px) {
  .receipt-card { margin-top: -8px; }
}

/* Elevation propagation: the hero gradient mesh lands on every
   marketing hero, not just the homepage. */
.page-hero,
.market-hero {
  background:
    radial-gradient(720px 420px at 88% -10%, rgb(22 82 240 / 0.14), transparent 62%),
    radial-gradient(560px 380px at -6% 108%, rgb(15 157 88 / 0.10), transparent 60%),
    linear-gradient(160deg, var(--foinse-color-surface-1) 0%, var(--foinse-color-accent-tint) 140%);
}