/* Component primitives */
.trial-heading-section {
  font: var(--text-heading-section);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.trial-card-title-lg {
  font: var(--text-title-lg);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.trial-card-title-md {
  font: var(--text-title-md);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.trial-card-description {
  font: var(--text-body-md);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.trial-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--trial-button-height);
  padding-inline: var(--trial-button-padding-x);
  gap: var(--trial-button-gap);
  border-radius: var(--trial-button-radius);
  font: var(--text-button-lg);
  letter-spacing: var(--letter-spacing-tight);
}

.trial-button--primary {
  color: var(--color-text-on-brand);
  background: var(--color-action-primary);
}

.trial-button--secondary {
  color: var(--color-action-secondary);
  background: var(--color-bg-canvas);
  border: 1px solid var(--color-action-secondary);
}

.trial-button--inverse-outline {
  color: var(--color-text-on-image);
  background: transparent;
  border: 1px solid var(--color-border-inverse-muted);
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control-height-md);
  box-sizing: border-box;
  border: 1px solid transparent;
  font: var(--text-button-md);
  letter-spacing: var(--letter-spacing-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ui-button:focus-visible {
  outline: 2px solid var(--color-violet-300);
  outline-offset: 2px;
}

.ui-button__icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex: 0 0 auto;
  color: currentColor;
}

.ui-button--lg {
  gap: var(--space-2);
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  font: var(--text-button-lg);
}

.ui-button--md {
  padding-inline: var(--space-10);
  border-radius: var(--radius-md);
}

.ui-button--inverse-outline {
  color: var(--color-text-on-brand);
  border-color: var(--color-border-inverse-muted);
  background: transparent;
}

.ui-button--inverse-outline:hover,
.ui-button--inverse-outline.ui-button--state-hover {
  background: rgba(255, 255, 255, 0.1);
}

.ui-button--inverse-outline:active,
.ui-button--inverse-outline.ui-button--state-active {
  color: var(--color-action-primary);
  border-color: var(--color-white);
  background: var(--color-white);
}

.ui-button--outline-muted {
  color: var(--color-action-secondary);
  border-color: var(--color-action-secondary);
  background: var(--color-bg-canvas);
}

.ui-button--outline-muted:hover,
.ui-button--outline-muted.ui-button--state-hover {
  background: color-mix(in srgb, var(--color-gray-150) 60%, var(--color-white));
}

.ui-button--outline-muted:active,
.ui-button--outline-muted.ui-button--state-active {
  color: var(--color-text-on-brand);
  border-color: var(--color-action-secondary);
  background: var(--color-action-secondary);
}

.ui-button--neutral {
  color: var(--color-text-on-brand);
  background: var(--color-action-secondary);
}

.ui-button--neutral:hover,
.ui-button--neutral.ui-button--state-hover {
  background: color-mix(
    in srgb,
    var(--color-action-secondary) 78%,
    var(--color-gray-900)
  );
}

.ui-button--neutral:active,
.ui-button--neutral.ui-button--state-active {
  background: color-mix(
    in srgb,
    var(--color-action-secondary) 58%,
    var(--color-gray-900)
  );
}

.ui-button--primary {
  color: var(--color-text-on-brand);
  background: var(--color-action-primary);
}

.ui-button--primary:hover,
.ui-button--primary.ui-button--state-hover {
  background: color-mix(
    in srgb,
    var(--color-action-primary) 78%,
    var(--color-black)
  );
}

.ui-button--primary:active,
.ui-button--primary.ui-button--state-active {
  background: color-mix(
    in srgb,
    var(--color-action-primary) 58%,
    var(--color-black)
  );
}

@media (prefers-reduced-motion: reduce) {
  .ui-button {
    transition: none;
  }
}

.ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  box-sizing: border-box;
  border: 0;
  padding: 0;
  color: var(--color-gray-200);
  background: transparent;
  appearance: none;
  cursor: pointer;
  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.ui-icon-button:disabled,
.ui-icon-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-icon-button:focus-visible {
  outline: 2px solid var(--color-violet-300);
  outline-offset: 2px;
}

.ui-icon-button__dot {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: currentColor;
}

.ui-icon-button__chevron {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: currentColor;
}

.ui-icon-button__chevron--up {
  transform: rotate(180deg);
}

.ui-icon-button--inverse {
  color: var(--color-pagination-inverse-default);
}

.ui-icon-button--inverse:hover,
.ui-icon-button--inverse.ui-icon-button--state-hover {
  color: var(--color-border-inverse-muted);
}

.ui-icon-button--inverse:active,
.ui-icon-button--inverse.ui-icon-button--state-active,
.ui-icon-button--inverse[aria-current="true"] {
  color: var(--color-pagination-inverse-active);
}

.ui-icon-button--muted {
  color: var(--color-gray-200);
}

.ui-icon-button--muted:hover,
.ui-icon-button--muted.ui-icon-button--state-hover {
  color: var(--color-gray-300);
}

.ui-icon-button--muted:active,
.ui-icon-button--muted.ui-icon-button--state-active,
.ui-icon-button--muted[aria-current="true"] {
  color: var(--color-gray-600);
}

.ui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font: var(--text-body-md);
  letter-spacing: var(--letter-spacing-tight);
}

.ui-checkbox__input {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-xs);
  background: var(--color-bg-canvas);
  appearance: none;
  cursor: pointer;
}

.ui-checkbox__input:checked {
  border-color: var(--color-action-primary);
  background: var(--color-action-primary);
}

.ui-checkbox__input:checked::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.5625rem;
  background: var(--color-white);
  content: "";
  -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
  mask: url("../icons/check.svg") center / contain no-repeat;
}

.ui-checkbox__input:focus-visible {
  outline: 2px solid var(--color-violet-300);
  outline-offset: 2px;
}

.ui-input {
  width: 12.5rem;
  min-height: var(--size-control-height-md);
  box-sizing: border-box;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font: var(--text-label-md);
  letter-spacing: var(--letter-spacing-tight);
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.ui-input::placeholder {
  color: var(--color-text-placeholder);
}

.ui-input:hover,
.ui-input--state-hover {
  border-color: var(--color-gray-300);
}

.ui-input:focus,
.ui-input--state-input {
  border-color: var(--color-border-default);
  outline: 0;
}

.ui-input:focus-visible {
  outline: 2px solid var(--color-violet-300);
  outline-offset: 2px;
}

.ui-input[aria-invalid="true"],
.ui-input--error {
  border-color: #ef6565;
}

.ui-input:disabled,
.ui-input--disabled {
  border-color: var(--color-border-default);
  color: var(--color-border-default);
  cursor: not-allowed;
}

.ui-input:disabled::placeholder,
.ui-input--disabled::placeholder {
  color: var(--color-border-default);
}

@media (prefers-reduced-motion: reduce) {
  .ui-icon-button,
  .ui-input {
    transition: none;
  }
}

.trial-card {
  padding: var(--trial-card-padding);
  border-radius: var(--trial-card-radius);
  background: var(--color-bg-canvas);
}

.trial-info-item {
  min-height: 4.375rem; /* 70px: 컴포넌트 고유 높이 */
  padding-block: var(--space-5);
  padding-inline: var(--space-12);
  gap: var(--space-2); /* Figma 6px -> 8px 정규화 */
  border-radius: var(--radius-card);
  background: var(--color-bg-subtle);
}

.trial-input {
  min-height: var(--trial-input-height);
  padding-block: var(--trial-input-padding-y); /* Figma 10px -> 8px 정규화 */
  padding-inline: var(--trial-input-padding-x);
  border: 1px solid var(--color-border-default);
  border-radius: var(--trial-input-radius);
  background: var(--color-bg-canvas);
  font: var(--text-label-md);
  letter-spacing: var(--letter-spacing-tight);
}

.trial-input::placeholder {
  color: var(--color-text-placeholder);
}

.trial-section-divider-title {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border-brand-muted);
  font: var(--text-title-sm);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-icon-accent);
}

/* Card components */
.feature-card-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  width: 100%;
}

.feature-card-set__column {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-6);
  min-width: 0;
}

.feature-card-set__column--balanced {
  align-content: center;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 13.75rem;
  box-sizing: border-box;
  padding: var(--space-10);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.feature-card--intro {
  justify-content: space-between;
  border: 1px solid var(--color-border-muted);
  background: var(--color-bg-canvas);
}

.feature-card--media {
  background: var(--trial-feature-media-bg);
}

.feature-card--tiles {
  background: var(--trial-feature-view-bg);
}

.feature-card--results {
  background: var(--trial-feature-report-bg);
}

.feature-card--state-hover,
.feature-card:hover {
  transform: translateY(-0.125rem);
}

.feature-card--state-active {
  box-shadow: inset 0 0 0 2px var(--color-border-brand-muted);
}

.feature-card__title {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--text-heading-section);
  letter-spacing: var(--letter-spacing-tight);
}

.feature-card__button-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.feature-card__button-wrap .ui-button {
  flex-shrink: 0;
}

.feature-card__icon {
  display: inline-block;
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--card-icon) center / contain no-repeat;
  mask: var(--card-icon) center / contain no-repeat;
}

.feature-card__icon--media {
  --card-icon: url("../icons/camera.svg");
  color: var(--trial-feature-media-icon);
}

.feature-card__icon--tiles {
  --card-icon: url("../icons/tiles.svg");
  color: var(--trial-feature-view-icon);
}

.feature-card__icon--results {
  --card-icon: url("../icons/pictures.svg");
  color: var(--trial-feature-report-icon);
}

.feature-card__body {
  display: grid;
  grid-template-columns: var(--size-icon-xl) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  min-width: 0;
}

.feature-card__headline {
  margin: 0;
  color: var(--color-text-primary);
  font: var(--text-title-lg);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-140);
}

.feature-card__description {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-primary);
  font: var(--font-weight-regular) var(--font-size-20) / var(--line-height-140)
    var(--font-family-sans);
  letter-spacing: var(--letter-spacing-tight);
}

.benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-10);
  border-radius: var(--radius-card);
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.benefit-card--state-hover,
.benefit-card:hover {
  transform: translateY(-0.125rem);
}

.benefit-card--state-active {
  box-shadow: inset 0 0 0 2px var(--color-border-brand-muted);
}

.benefit-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

.benefit-card__icon {
  display: inline-block;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  flex: 0 0 auto;
  color: var(--color-icon-accent);
  background: currentColor;
  -webkit-mask: var(--card-icon) center / contain no-repeat;
  mask: var(--card-icon) center / contain no-repeat;
}

.benefit-card__icon--data {
  --card-icon: url("../icons/realtime-monitoring.svg");
}

.benefit-card__icon--settings {
  --card-icon: url("../icons/monitor-control.svg");
}

.benefit-card__icon--operations {
  --card-icon: url("../icons/lock-time.svg");
}

.benefit-card__title {
  min-width: 0;
  margin: 0;
  color: var(--color-text-primary);
  font: var(--text-title-md);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-140);
}

.benefit-card__list {
  margin: 0;
  padding-inline-start: var(--space-6);
  color: var(--color-text-primary);
  font: var(--text-body-md);
  letter-spacing: var(--letter-spacing-tight);
  list-style: disc;
}

.benefit-card__list li + li {
  margin-top: var(--space-1);
}

.trial-info-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  width: 100%;
}

.trial-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 4.375rem;
  box-sizing: border-box;
  padding-block: var(--space-5);
  padding-inline: var(--space-12);
  border-radius: var(--radius-card);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.trial-info--state-hover,
.trial-info:hover {
  transform: translateY(-0.125rem);
}

.trial-info--state-active {
  box-shadow: inset 0 0 0 2px var(--color-border-brand-muted);
}

.trial-info__icon {
  display: inline-block;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: 0 0 auto;
  color: var(--color-icon-brand);
  background: currentColor;
  -webkit-mask: var(--card-icon) center / contain no-repeat;
  mask: var(--card-icon) center / contain no-repeat;
}

.trial-info__icon--calendar {
  --card-icon: url("../icons/calendar-clock.svg");
}

.trial-info__icon--license {
  --card-icon: url("../icons/archive.svg");
}

.trial-info__icon--data {
  --card-icon: url("../icons/database-search.svg");
}

.trial-info__text {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-body-md);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-140);
}

@media (max-width: 1023px) {
  .feature-card-set {
    gap: var(--space-4);
  }

  .feature-card-set__column {
    gap: var(--space-4);
  }

  .feature-card {
    min-height: 7rem;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .feature-card__title {
    font: var(--text-title-sm);
  }

  .feature-card__icon {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
  }

  .feature-card__body {
    gap: var(--space-2);
  }

  .feature-card__headline {
    font: var(--text-button-md);
    line-height: var(--line-height-140);
  }

  .feature-card__description {
    font: var(--text-caption);
    line-height: var(--line-height-140);
  }

  .feature-card__button-wrap .ui-button--lg {
    gap: var(--space-1);
    padding-inline: var(--space-4);
    font: var(--text-caption);
  }

  .benefit-list {
    gap: var(--space-4);
  }

  .benefit-card {
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .benefit-card__header {
    gap: var(--space-2);
  }

  .benefit-card__icon {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
  }

  .benefit-card__title {
    font: var(--text-button-md);
    line-height: var(--line-height-140);
  }

  .benefit-card__list {
    padding-inline-start: 1.125rem;
    font: var(--text-caption);
    line-height: var(--line-height-160);
  }

  .trial-info-list {
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  .trial-info {
    min-height: auto;
    padding: var(--space-2);
    border-radius: var(--radius-md);
  }

  .trial-info__icon {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }

  .trial-info__text {
    font: var(--text-caption);
    line-height: var(--line-height-140);
  }
}

@media (max-width: 767px) {
  .feature-card-set {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-card {
    width: 100%;
  }

  .feature-card--intro {
    gap: var(--space-3);
    min-height: auto;
  }

  .feature-card__button-wrap {
    justify-content: flex-end;
  }

  .feature-card__button-wrap .ui-button--lg {
    min-height: 2rem;
    padding-block: 0.375rem;
  }

  .feature-card__body {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .feature-card__icon {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
  }

  .feature-card__description {
    grid-column: 1 / -1;
  }

  .benefit-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .benefit-card__icon {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }

  .benefit-card__list {
    white-space: normal;
  }

  .trial-info-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .trial-info {
    width: 100%;
    padding: var(--space-3);
  }

  .trial-info__icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .benefit-card,
  .trial-info {
    transition: none;
  }

  .feature-card--state-hover,
  .feature-card:hover,
  .benefit-card--state-hover,
  .benefit-card:hover,
  .trial-info--state-hover,
  .trial-info:hover {
    transform: none;
  }
}

/* Form components */
.form-section {
  --form-label-width: 7.5rem;
  --form-required-color: #ef6565;

  display: grid;
  gap: 0;
  width: 100%;
  color: var(--color-text-primary);
}

.form-section__header {
  display: flex;
  align-items: center;
  min-height: var(--space-12);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border-brand-muted);
}

.form-section__title {
  margin: 0;
  color: var(--color-icon-accent);
  font: var(--text-title-sm);
  letter-spacing: var(--letter-spacing-tight);
}

.form-section__content {
  display: grid;
  gap: 0;
  width: 100%;
}

.form-field {
  display: grid;
  grid-template-columns: var(--form-label-width) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.form-field:first-child {
  padding-top: var(--space-6);
}

.form-field--top {
  align-items: start;
}

.form-field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--color-text-primary);
  font: var(--text-label-md);
  letter-spacing: var(--letter-spacing-tight);
}

.form-field__required {
  color: var(--form-required-color);
}

.form-field__control {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.form-field__hint {
  margin: 0;
  color: var(--color-gray-350);
  font: var(--text-caption);
  letter-spacing: var(--letter-spacing-tight);
}

.form-field .ui-input,
.form-field .form-select {
  width: 100%;
}

.form-select-wrap {
  position: relative;
  display: block;
  width: 100%;
  color: var(--color-gray-500);
}

.form-select-wrap:not([hidden])::after {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: var(--space-4);
  height: var(--space-4);
  background: currentColor;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask: url("../icons/arrow-down.svg") center / contain no-repeat;
  mask: url("../icons/arrow-down.svg") center / contain no-repeat;
}

.form-select {
  min-height: var(--size-control-height-md);
  box-sizing: border-box;
  padding-block: var(--space-2);
  padding-inline: var(--space-4) var(--space-12);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-canvas);
  color: var(--color-gray-500);
  font: var(--text-label-md);
  letter-spacing: var(--letter-spacing-tight);
  appearance: none;
}

.form-select:focus-visible {
  outline: 2px solid var(--color-violet-300);
  outline-offset: 2px;
}

.terms-panel {
  display: grid;
  width: 100%;
}

.terms-panel__header {
  min-height: var(--size-control-height-md);
  box-sizing: border-box;
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-bg-subtle);
}

.terms-panel__title {
  overflow: hidden;
  margin: 0;
  color: var(--color-text-tertiary);
  font: var(--font-weight-semibold) var(--font-size-16) / var(--line-height-100)
    var(--font-family-sans);
  letter-spacing: var(--letter-spacing-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terms-panel__body {
  max-height: 7.5rem;
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: var(--space-4);
  border: solid var(--color-border-default);
  border-width: 0 1px 1px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-bg-canvas);
  color: var(--color-text-tertiary);
  font: var(--text-body-sm);
  letter-spacing: var(--letter-spacing-tight);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.terms-panel__body::-webkit-scrollbar {
  width: var(--space-2);
}

.terms-panel__body::-webkit-scrollbar-thumb {
  border-radius: var(--radius-sm);
  background: var(--color-border-default);
}

.terms-panel__text {
  margin: 0;
}

.terms-panel__body ol {
  display: grid;
  gap: var(--space-1);
  list-style: decimal;
  padding-inline-start: var(--space-5);
}

.terms-agreement {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  color: var(--color-text-primary);
  font: var(--font-weight-medium) var(--font-size-14) / var(--line-height-160)
    var(--font-family-sans);
  letter-spacing: var(--letter-spacing-tight);
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding-top: var(--space-5);
}

@media (max-width: 767px) {
  .form-section {
    --form-label-width: 1fr;
  }

  .form-section__header {
    min-height: auto;
    padding-block: var(--space-4);
  }

  .form-field,
  .form-field--top {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-2);
    padding-block: var(--space-3);
  }

  .form-field:first-child {
    padding-top: var(--space-4);
  }

  .terms-agreement {
    align-items: flex-start;
    white-space: normal;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions .ui-button {
    width: 100%;
  }
}

textarea.ui-input {
  min-height: 5.5rem;
  resize: vertical;
}

.field-wrap {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.field-wrap.has-error .ui-input,
.field-wrap.has-error .form-select,
.field-wrap.has-error .ui-checkbox__input {
  border-color: var(--form-required-color, #ef6565);
}

.field-wrap.has-error .ui-input:focus-visible,
.field-wrap.has-error .form-select:focus-visible,
.field-wrap.has-error .ui-checkbox__input:focus-visible {
  outline-color: color-mix(
    in srgb,
    var(--form-required-color, #ef6565) 55%,
    white
  );
}

.err-msg {
  display: none;
  margin: 0;
  color: var(--form-required-color, #ef6565);
  font: var(--text-caption);
  letter-spacing: var(--letter-spacing-tight);
}

.field-wrap.has-error .err-msg {
  display: block;
}

.c-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.c-icon--check {
  --icon-url: url("../icons/check.svg");
}

.c-icon--warning {
  --icon-url: url("../icons/lock-time.svg");
}

.c-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  display: none;
  place-items: center;
  padding: var(--space-5);
  background: rgba(42, 45, 54, 0.52);
}

.c-modal-overlay.is-open {
  display: grid;
}

.c-modal {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: min(100%, 28rem);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-bg-canvas);
  box-shadow: 0 1.25rem 3.75rem rgba(42, 45, 54, 0.24);
  text-align: center;
}

.c-modal__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-action-primary);
  background: color-mix(in srgb, var(--color-action-primary) 12%, white);
}

.c-modal__icon--error {
  color: var(--form-required-color, #ef6565);
  background: color-mix(
    in srgb,
    var(--form-required-color, #ef6565) 12%,
    white
  );
}

.c-modal__icon .c-icon {
  width: 1.875rem;
  height: 1.875rem;
}

.c-modal__title {
  margin: 0;
  color: var(--color-text-primary);
  font: var(--text-title-sm);
}

.c-modal__text,
.c-modal__list {
  margin: 0;
  color: var(--color-text-tertiary);
  font: var(--text-body-sm);
  letter-spacing: var(--letter-spacing-tight);
}

.c-modal__list {
  display: grid;
  gap: var(--space-1);
  justify-self: stretch;
  padding-inline-start: var(--space-6);
  text-align: left;
}

.c-modal .ui-button {
  min-width: 11rem;
}

@media (max-width: 767px) {
  .c-modal {
    padding: var(--space-6);
  }
}