/* Generated pre-registration flow styles. Requires site.css tokens and #root app variables. */

/* @lifeos-css-tier flows:start login-auth */
.participant-shell--login,
.participant-shell--auth-layout {
  --login-panel-inline: var(--container-readable-wide);
  --login-panel-offset: var(--layout-login-panel-offset);
  --login-action-inline: min(22rem, 100%);
  --login-contact-column-inline: min(23rem, 100%);
  --login-action-min-height: max(var(--button-min-height), var(--interactive-min-size), 2.65rem);
  --login-action-border: rgba(255, 255, 255, 0.42);
  --login-action-border-hover: rgba(255, 255, 255, 0.66);
  --login-action-color: rgba(255, 255, 255, 0.74);
  --login-action-color-hover: rgba(255, 255, 255, 0.92);
  --login-title-strong-color: rgba(255, 255, 255, 1);
  --login-subtitle-color: rgba(255, 255, 255, 0.88);
  --login-placeholder-color: var(--form-field-text-color);
  --login-placeholder-muted-color: var(--form-placeholder-muted-color);
  --login-input-underline: var(--form-field-border-color);
  --login-input-border: var(--form-field-border-color);
  --login-input-border-focus: var(--form-field-border-color-focus);
  --login-code-cell-border: rgba(255, 255, 255, 0.5);
  --login-code-cell-border-focus: rgba(255, 255, 255, 0.78);
  --login-code-cell-color: rgba(255, 255, 255, 0.92);
  --login-feedback-color: rgba(255, 255, 255, 0.76);
  --login-feedback-error-color: rgba(255, 210, 210, 0.9);
  --login-submit-border: rgba(255, 255, 255, 0.72);
  --login-submit-compact-border: rgba(255, 255, 255, 0.52);
  --login-submit-color: rgba(255, 255, 255, 0.92);
  --login-submit-compact-color: rgba(255, 255, 255, 0.86);
  --login-submit-border-hover: rgba(255, 255, 255, 1);
  --login-submit-bg-hover: rgba(255, 255, 255, 0.94);
  --login-unit-gap: var(--layout-stack-gap);
}

.participant-shell--login,
.participant-shell--auth-layout:not(.participant-shell--registration),
.participant-shell--auth-layout.participant-shell--registration:not(
    :is(.participant-shell--join-gift, .participant-shell--gift-activation):has(
        .panel-scroll--join-identity
      )
  ) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--viewport-height);
  overflow: hidden;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  max-height: var(--viewport-height);
  overflow: hidden;
}

.participant-shell--auth-layout.participant-shell--registration:not(
    :is(.participant-shell--join-gift, .participant-shell--gift-activation):has(
        .panel-scroll--join-identity
      )
  )
  > .split-stage,
.participant-shell--login .split-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: var(--viewport-height);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity)
  > .split-stage {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.participant-shell--login .form-panel,
.participant-shell--auth-layout.participant-shell--registration:not(
    :is(.participant-shell--join-gift, .participant-shell--gift-activation):has(
        .panel-scroll--join-identity
      )
  )
  > .form-panel.split-screen-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: var(--viewport-height);
  --login-stack-gap: var(--login-unit-gap);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  pointer-events: none;
  transform: translateY(calc(-1 * var(--login-panel-offset)));
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity)
  > .form-panel.split-screen-panel {
  position: relative;
  inset: auto;
  z-index: 1;
  min-height: 0;
  height: auto;
  max-height: var(--viewport-height);
  --login-stack-gap: var(--login-unit-gap);
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  pointer-events: auto;
  transform: none;
}

@media (min-width: 64rem) {
  .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
      .participant-shell--join-gift,
      .participant-shell--gift-activation
    ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    max-height: var(--viewport-height);
  }

  .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
      .participant-shell--join-gift,
      .participant-shell--gift-activation
    ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
    > .split-stage {
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    max-height: var(--viewport-height);
  }

  .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
      .participant-shell--join-gift,
      .participant-shell--gift-activation
    ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
    > .form-panel.split-screen-panel {
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    max-height: var(--viewport-height);
  }
}

.participant-shell--auth-layout.participant-shell--registration:not(
    :is(.participant-shell--join-gift, .participant-shell--gift-activation):has(
        .panel-scroll--join-identity
      )
  )
  > .form-panel
  > .panel-scroll,
.participant-shell--login .panel-scroll {
  --login-panel-gap: var(--login-unit-gap);
  grid-row: 2;
  flex: none;
  align-self: center;
  justify-self: center;
  margin-top: var(--login-panel-offset);
  width: var(--login-panel-inline);
  display: grid;
  gap: var(--login-panel-gap);
  justify-items: center;
  padding: 0;
  text-align: center;
  pointer-events: auto;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity)
  > .form-panel
  > .panel-scroll {
  --login-panel-gap: var(--login-unit-gap);
  margin-top: 0;
  pointer-events: auto;
}

.participant-shell--login {
  --login-panel-offset: var(--layout-login-panel-offset);
  display: block;
}

.participant-shell--login .form-panel {
  position: absolute;
}

.participant-shell--login .panel-scroll {
  grid-row: 2;
  --login-panel-gap: var(--login-unit-gap);
  gap: var(--login-panel-gap);
  width: var(--login-panel-inline);
  justify-items: center;
}

.participant-shell--login .login-copy {
  display: grid;
  gap: var(--login-unit-gap);
  width: 100%;
  max-width: var(--container-form-narrow-local);
}

.participant-shell--login .login-copy .stage-phrase-title {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tr-display);
}

.participant-shell--login .login-copy:has(.login-missing-actions),
.participant-shell--login .login-copy--contact {
  max-width: var(--copy-wide);
  gap: var(--login-unit-gap);
}

.participant-shell--login .login-copy--contact {
  gap: var(--layout-stack-gap-tight);
}

.participant-shell--login .login-copy:has(.login-missing-actions) .stage-phrase-title,
.participant-shell--login .login-copy--contact .stage-phrase-title {
  font-size: var(--type-title-small);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-ui-tight);
  white-space: nowrap;
  text-wrap: nowrap;
}

.participant-shell--login .login-copy:has(.login-missing-actions) .stage-phrase-title {
  color: var(--login-title-strong-color);
}

.participant-shell--login .login-copy--contact .stage-phrase-title {
  display: grid;
  gap: 0.18em;
  font-size: var(--login-contact-title-size);
  font-weight: 450;
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-none);
  white-space: pre-wrap;
  text-wrap: balance;
}

.participant-shell--login .login-copy--contact .stage-phrase-title span {
  display: block;
}

.participant-shell--login .login-copy .stage-subtitle {
  color: var(--login-subtitle-color);
  font-size: var(--login-subtitle-size);
}

.participant-shell--login .login-copy--contact .stage-phrase-title {
  max-width: var(--copy-wide);
  margin-inline: auto;
}

.participant-shell--login .login-missing-actions,
.participant-shell--login .login-contact-actions {
  width: 100%;
  gap: var(--login-unit-gap);
}

.participant-shell--login .login-missing-actions {
  --login-missing-action-inline: min(16.5rem, calc((100vw - var(--shell-gutter) * 3) / 2));

  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--login-missing-action-inline)));
  justify-content: center;
  margin-top: 0;
}

.participant-shell--login .login-contact-actions {
  display: grid;
  grid-template-columns: minmax(0, var(--login-contact-column-inline));
  gap: var(--layout-control-gap);
  justify-items: center;
}

.participant-shell--login .login-contact-actions .action {
  width: var(--login-action-inline);
  min-height: var(--login-action-min-height);
  padding-inline: var(--button-padding-inline);
  border: var(--divider-width) solid var(--login-action-border);
  background: transparent;
  color: var(--login-action-color);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.participant-shell--login .login-contact-actions .action:hover {
  border-color: var(--login-action-border-hover);
  background: transparent;
  color: var(--login-action-color-hover);
}

.participant-shell--login .login-missing-actions .action {
  width: 100%;
  min-height: var(--login-action-min-height);
  padding-inline: var(--button-padding-inline);
  border: var(--divider-width) solid var(--login-action-border);
  background: transparent;
  color: var(--login-action-color);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.participant-shell--login .login-missing-actions .action:hover {
  border-color: var(--login-action-border-hover);
  background: transparent;
  color: var(--login-action-color-hover);
}

.participant-shell--login .login-missing-retry {
  color: var(--login-title-strong-color);
}

.participant-shell--login .login-missing-retry:hover:not(:disabled) {
  background: transparent;
  color: var(--login-title-strong-color);
  opacity: 0.82;
}

@container adaptive-surface (max-width: 64rem) {
  .participant-shell--login .login-copy:has(.login-missing-actions),
  .participant-shell--login .login-copy--contact {
    gap: var(--layout-stack-gap-tight);
  }

  .participant-shell--login .login-copy:has(.login-missing-actions) {
    max-width: var(--container-nav-compact-local);
  }

  .participant-shell--login .login-missing-actions {
    gap: var(--layout-control-gap);
    grid-template-columns: minmax(0, 1fr);
  }
}

.participant-shell--login .form-section > h2 {
  display: none;
}

.participant-shell--login .form-section > form {
  gap: var(--login-stack-gap);
  justify-items: center;
}

.participant-shell--login .login-form-section {
  width: 100%;
  max-width: var(--container-form-local);
  margin-top: 0;
  margin-bottom: 0;
  --login-text-size: var(--login-form-text-size);
  --login-stack-gap: var(--login-unit-gap);
}

.participant-shell--login .login-form-section form {
  width: 100%;
  display: grid;
  gap: var(--login-stack-gap);
  justify-items: center;
}

.participant-shell--login[data-e2e-step="email"] .login-form-section form {
  gap: var(--adaptive-base-gap);
}

.participant-shell--login[data-e2e-step="code"] .login-form-section form {
  gap: var(--layout-stack-gap-tight);
}

.participant-shell--login .login-access-caption,
.participant-shell--auth-layout .login-access-caption {
  margin: 0;
  font-size: var(--type-login-control);
  font-weight: 560;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide-soft);
  justify-self: center;
  text-align: center;
}

.participant-shell--login .login-access-caption .text-shimmer,
.participant-shell--auth-layout .login-access-caption .text-shimmer {
  --text-shimmer-base: rgba(255, 255, 255, 0.65);
  --text-shimmer-glow: rgba(232, 240, 255, 0.98);
  --text-shimmer-bright: rgba(255, 255, 255, 1);
}

.participant-shell--login .login-access-caption .text-shimmer {
  --text-shimmer-base: rgba(255, 255, 255, 0.65);
  --text-shimmer-glow: rgba(232, 240, 255, 0.98);
  --text-shimmer-bright: rgba(255, 255, 255, 1);
}

.participant-shell--login .login-form-section label {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
}

.participant-shell--login .login-form-section input:not([type="checkbox"]):not([type="radio"]) {
  text-align: center;
}

.participant-shell--login .login-form-section input[name="code"],
.participant-shell--login .login-form-section input[type="email"],
.registration-otp-section input[name="code"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0;
  border-bottom: var(--divider-width) solid var(--login-input-underline);
  border-radius: 0;
  box-shadow: none;
  caret-color: var(--form-field-text-color);
  color: var(--form-field-text-color);
  field-sizing: content;
  -webkit-text-fill-color: var(--form-field-text-color);
  font-weight: var(--form-field-font-weight);
  padding-inline: 0;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  font-size: var(--login-text-size, var(--login-form-text-size));
  justify-self: center;
}

.participant-shell--login input::placeholder {
  color: var(--login-placeholder-color);
  opacity: 1;
}

.participant-shell--login .login-form-section input[type="email"]::placeholder {
  font-size: var(--type-login-small);
  font-weight: var(--form-field-font-weight);
  line-height: inherit;
}

.participant-shell--login .login-form-section input[name="code"]::placeholder {
  color: var(--login-placeholder-muted-color);
  opacity: 1;
}

.participant-shell--login .login-form-section input[type="email"] {
  --login-email-control-height: var(--control-lg);
  --login-email-line-height: var(--leading-control);
  --login-email-padding-block-end: 0.08em;

  background: transparent !important;
  border: var(--form-field-border-width) solid var(--login-input-border);
  border-radius: var(--radius-field);
  box-shadow: none;
  box-sizing: border-box;
  height: var(--login-email-control-height);
  min-width: min(13.5rem, 100%);
  width: min(max(13.5rem, var(--login-email-width, 13.5rem)), var(--container-safe-inline));
  padding: 0 var(--button-padding-inline) var(--login-email-padding-block-end);
  color: var(--form-field-text-color);
  caret-color: var(--form-field-text-color);
  font-weight: var(--form-field-font-weight);
  line-height: var(--login-email-line-height);
  -webkit-text-fill-color: var(--form-field-text-color);
}

.participant-shell--login .login-form-section input[type="email"]:valid {
  border-color: var(--login-input-border);
  background: transparent;
  box-shadow: none;
}

.participant-shell--login .login-form-section input[type="email"]:focus,
.participant-shell--login .login-form-section input[type="email"]:focus-visible {
  border-color: var(--login-input-border-focus);
}

.participant-shell--login .login-form-section input[type="email"]:-webkit-autofill,
.participant-shell--login .login-form-section input[type="email"]:-webkit-autofill:hover,
.participant-shell--login .login-form-section input[type="email"]:-webkit-autofill:focus,
.participant-shell--login .login-form-section input[type="email"]:-webkit-autofill:active,
.participant-shell--login .login-form-section input[type="email"]:autofill {
  border: var(--form-field-border-width) solid var(--login-input-border) !important;
  border-radius: var(--radius-field) !important;
  -webkit-text-fill-color: var(--form-field-text-color) !important;
  color: var(--form-field-text-color) !important;
}

.participant-shell--login .login-form-section input[name="code"]:-webkit-autofill,
.participant-shell--login .login-form-section input[name="code"]:-webkit-autofill:hover,
.participant-shell--login .login-form-section input[name="code"]:-webkit-autofill:focus,
.participant-shell--login .login-form-section input[name="code"]:-webkit-autofill:active,
.participant-shell--login .login-form-section input[name="code"]:autofill,
.registration-otp-section input[name="code"]:-webkit-autofill,
.registration-otp-section input[name="code"]:-webkit-autofill:hover,
.registration-otp-section input[name="code"]:-webkit-autofill:focus,
.registration-otp-section input[name="code"]:-webkit-autofill:active,
.registration-otp-section input[name="code"]:autofill {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  filter: none;
  transition:
    background-color 999999s ease-out,
    color 999999s ease-out;
}

.participant-shell--login .login-code-cells-field {
  display: grid;
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.participant-shell--login .login-code-cells-field input[name="code"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  caret-color: transparent;
}

.participant-shell--login .login-code-cells {
  display: grid;
  grid-template-columns: repeat(6, clamp(2rem, calc(var(--fluid-inline) * 7.2), 2.65rem));
  gap: var(--layout-control-gap);
}

.participant-shell--login .login-code-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: var(--divider-width) solid var(--login-code-cell-border);
  border-radius: var(--radius-sm);
  color: var(--login-code-cell-color);
  font-size: var(--type-login-control);
  font-weight: 350;
}

.participant-shell--login .login-code-cells-field:focus-within .login-code-cell {
  border-color: var(--login-code-cell-border-focus);
}

.participant-shell--login .login-code-feedback {
  justify-self: center;
  min-height: calc(var(--login-text-size, var(--login-form-text-size)) * 1.15);
  max-width: var(--container-feedback-local);
  margin: 0;
  color: var(--login-feedback-color);
  font-size: var(--type-login-small);
  font-weight: 350;
  line-height: var(--leading-control);
  text-align: center;
  text-wrap: balance;
  visibility: hidden;
}

.participant-shell--login .login-code-feedback[data-visible="true"] {
  visibility: visible;
}

.participant-shell--login .login-code-feedback[data-tone="error"] {
  color: var(--feedback-error-color);
}

.participant-shell--login .login-form-section button[type="submit"] {
  justify-self: center;
  width: auto;
  min-height: calc(max(var(--button-min-height), 2.7rem) * 1.3);
  padding: calc(var(--button-padding-block) * 1.3) calc(var(--button-padding-inline) * 1.3);
  border: var(--divider-width) solid var(--login-submit-border);
  background: transparent;
  color: var(--login-submit-color);
  font-size: var(--login-text-size, var(--login-form-text-size));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.participant-shell--login .login-form-section button[data-e2e="login-submit-email"],
.participant-shell--login .login-form-section button[data-e2e="login-submit-code"],
.participant-shell--login .login-form-section .otp-resend-confirm {
  min-height: max(var(--button-min-height), 2.35rem);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-color: var(--login-submit-compact-border);
  color: var(--login-submit-compact-color);
  font-size: var(--type-login-small);
  font-weight: 300;
}

.participant-shell--login
  .login-form-section
  button[data-e2e="login-submit-email"]:hover:not(:disabled),
.participant-shell--login
  .login-form-section
  button[data-e2e="login-submit-code"]:hover:not(:disabled),
.participant-shell--login .login-form-section .otp-resend-confirm:hover:not(:disabled) {
  font-weight: 500;
}

.participant-shell--login .login-form-section button[type="submit"]:hover:not(:disabled) {
  border-color: var(--login-submit-border-hover);
  background: var(--login-submit-bg-hover);
  color: var(--accent-ink);
  opacity: 1;
}

.participant-shell--login .login-form-section .otp-resend-confirm {
  justify-self: center;
  width: auto;
  border: var(--divider-width) solid var(--login-submit-border);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.participant-shell--login .login-form-section .otp-resend-confirm:hover:not(:disabled) {
  border-color: var(--login-submit-border-hover);
  background: var(--login-submit-bg-hover);
  color: var(--accent-ink);
  opacity: 1;
}

.participant-shell--login[data-e2e-step="code"] .login-form-section .otp-resend-hint {
  margin-top: 0;
}

.participant-shell--login > .panel-footer.panel-footer--login {
  display: contents;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.participant-shell--login > .panel-footer.panel-footer--login > :nth-child(1) {
  justify-self: center;
}

.participant-shell--login > .panel-footer.panel-footer--login::after {
  content: none;
  display: none;
}

.panel-footer {
  margin-top: auto;
}

.panel:where(:has(> .panel-scroll + .panel-footer)),
.form-panel:where(:has(> .panel-scroll + .panel-footer)) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  padding-block: 0;
}

.panel:where(:has(> .panel-scroll + .panel-footer)) > .panel-scroll,
.form-panel:where(:has(> .panel-scroll + .panel-footer)) > .panel-scroll {
  grid-row: 2;
  flex: none;
  min-height: 0;
  padding-block: 0;
}

.panel:where(:has(> .panel-scroll + .panel-footer)) > .panel-footer,
.form-panel:where(:has(> .panel-scroll + .panel-footer)) > .panel-footer {
  grid-row: 3;
  align-self: stretch;
  margin-top: 0;
}

.participant-shell--login[data-e2e-step="code"]
  .form-panel:where(:has(> .panel-scroll + .panel-footer)) {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}

.participant-shell--login[data-e2e-step="email"]
  .form-panel:where(:has(> .panel-scroll + .panel-footer)) {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}

.participant-shell--login[data-e2e-step="email"] .panel-scroll {
  margin-top: 0;
}

.participant-shell--login[data-e2e-step="code"] .panel-scroll {
  grid-row: 2;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity)
  > .form-panel.split-screen-panel {
  --join-auth-control-inline: min(21rem, calc(100vw - var(--shell-gutter) * 2));
  --join-auth-panel-inline: var(--join-auth-control-inline);
  --join-auth-edge-inset-y: 12%;
  --join-auth-edge-inset-block: 12svh;
  grid-template-rows: minmax(0, 1fr) var(--join-auth-edge-inset-y);
  transform: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:not(
    :is(.participant-shell--join-gift, .participant-shell--gift-activation):has(
        .panel-scroll--join-identity
      )
  ):has(.panel-scroll--join-identity)
  > .form-panel.split-screen-panel {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  transform: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity)
  > .form-panel.split-screen-panel {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .panel-scroll--join-identity
  )
  > .form-panel
  > .panel-scroll.panel-scroll--join-identity {
  --registration-identity-stack-gap: var(--space-5);
  --join-auth-panel-inline: min(21rem, calc(100vw - var(--shell-gutter) * 2));
  grid-row: 2;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: min(100%, var(--join-auth-panel-inline));
  max-width: var(--join-auth-panel-inline);
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-x: visible;
  box-sizing: border-box;
  pointer-events: auto;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .panel-scroll--join-identity
  )
  > .form-panel
  > .panel-scroll.panel-scroll--join-identity
  > .lazy-suspense-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--registration-identity-stack-gap);
  width: 100%;
  min-width: 0;
  padding-bottom: var(--registration-identity-stack-gap);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .panel-scroll--join-identity
  )
  > .form-panel
  > .panel-scroll.panel-scroll--join-identity
  > :is(.lazy-suspense-reveal)
  > :is(
    .registration-identity-title,
    .status-card,
    .registration-identity-section,
    .registration-identity-note
  ),
.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .panel-scroll--join-identity
  )
  > .form-panel
  > .panel-scroll.panel-scroll--join-identity
  > :is(
    .registration-identity-title,
    .status-card,
    .registration-identity-section,
    .registration-identity-note
  ) {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--join-auth-panel-inline);
  margin: 0;
  padding: 0;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .panel-scroll--join-identity
  )
  > .form-panel
  > .panel-scroll.panel-scroll--join-identity
  > .registration-identity-section {
  pointer-events: auto;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:not(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity)
  > .panel-footer.panel-footer--registration {
  display: contents;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  ):has(.panel-scroll--join-identity)
  > .panel-footer.panel-footer--registration {
  display: contents;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

@media (max-width: 63.99rem) {
  .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
      .participant-shell--join-gift,
      .participant-shell--gift-activation
    ):has(.panel-scroll--join-identity)
    > .form-panel.split-screen-panel {
    grid-template-rows: auto auto;
    align-content: start;
  }

  .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
      .participant-shell--join-gift,
      .participant-shell--gift-activation
    ):has(.panel-scroll--join-identity)
    > .form-panel
    > .panel-scroll.panel-scroll--join-identity {
    grid-row: 1;
    align-self: stretch;
    padding-block: var(--registration-identity-stack-gap);
  }

}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-rules-section
  )
  > .form-panel.split-screen-panel {
  --rules-consent-stack-gap: clamp(2rem, 8svh, 4.5rem);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  transform: none;
  pointer-events: auto;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-rules-section
  )
  > .form-panel
  > .panel-scroll.split-content-stack {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  width: var(--accordion-inline);
  max-width: var(--accordion-inline);
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-rules-section
  )
  > .form-panel
  > .panel-scroll.split-content-stack
  > .lazy-suspense-reveal {
  width: 100%;
  min-width: 0;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-rules-section
  )
  .rules-consent-section {
  gap: var(--rules-consent-stack-gap);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-rules-section
  )
  > .form-panel
  > .panel-scroll.split-content-stack::-webkit-scrollbar {
  display: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-rules-section
  )
  .registration-rules-section {
  justify-self: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-rules-section
  )
.participant-shell.participant-shell--auth-layout.participant-shell--registration
  > .form-panel
  > .panel-scroll:has(.join-auth-access-caption) {
  --login-panel-gap: var(--space-3);
}

.participant-shell--auth-layout .join-auth-title {
  justify-self: center;
  width: 100%;
  margin: 0;
  color: var(--text);
  font-size: calc(var(--type-login-control) * 1.92);
  font-weight: 1120;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-none);
  text-align: center;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  > .form-panel.split-screen-panel {
  --join-auth-panel-inline: min(21rem, calc(100vw - var(--shell-gutter) * 2));
  --join-auth-otp-block: clamp(9rem, 22svh, 11rem);
  --join-auth-otp-end: calc(50% + var(--join-auth-otp-block) / 2);
  --join-auth-back-mid: calc((var(--join-auth-otp-end) + 100%) / 2);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  > .form-panel
  > .panel-scroll
  > :is(.registration-otp-section, .lazy-suspense-reveal) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--join-auth-panel-inline);
  max-width: calc(100vw - var(--shell-gutter) * 2);
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  > .form-panel
  > .panel-scroll
  > .lazy-suspense-reveal
  > .registration-otp-section {
  position: static;
  width: 100%;
  max-width: 100%;
  transform: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section.login-form-section
  form {
  gap: var(--layout-stack-gap-tight);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-cells-field {
  display: grid;
  position: relative;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-cells-field
  input[name="code"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  caret-color: transparent;
  border: 0;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-cells {
  display: grid;
  grid-template-columns: repeat(6, clamp(2rem, calc(var(--fluid-inline) * 7.2), 2.65rem));
  gap: var(--layout-control-gap);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: var(--divider-width) solid var(--login-code-cell-border);
  border-radius: var(--radius-sm);
  color: var(--login-code-cell-color);
  font-size: var(--type-login-control);
  font-weight: 350;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-cells-field:focus-within
  .login-code-cell {
  border-color: var(--login-code-cell-border-focus);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-feedback {
  justify-self: center;
  min-height: calc(var(--login-text-size, var(--login-form-text-size)) * 1.15);
  max-width: var(--container-feedback-local);
  margin: 0;
  color: var(--login-feedback-color);
  font-size: var(--type-login-small);
  font-weight: 350;
  line-height: var(--leading-control);
  text-align: center;
  text-wrap: balance;
  visibility: hidden;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-feedback[data-visible="true"] {
  visibility: visible;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .login-code-feedback[data-tone="error"] {
  color: var(--feedback-error-color);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  button[type="submit"] {
  justify-self: center;
  width: auto;
  min-height: calc(max(var(--button-min-height), 2.7rem) * 1.3);
  padding: calc(var(--button-padding-block) * 1.3) calc(var(--button-padding-inline) * 1.3);
  border: var(--divider-width) solid var(--login-submit-border);
  background: transparent;
  color: var(--login-submit-color);
  font-size: var(--login-text-size, var(--login-form-text-size));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  button[data-e2e="registration-submit"],
.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .otp-resend-confirm {
  min-height: max(var(--button-min-height), 2.35rem);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-color: var(--login-submit-compact-border);
  color: var(--login-submit-compact-color);
  font-size: var(--type-login-small);
  font-weight: 300;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
    .registration-otp-section.otp-only-section
  )
  .registration-otp-section
  .otp-resend-hint {
  margin-top: 0;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:not(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  )
  .registration-identity-section
  label,
.participant-shell.participant-shell--auth-layout.participant-shell--registration:not(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  )
  .registration-identity-section
  input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  )
  .registration-section:has(input[name="name"])
  label,
.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  )
  .registration-section:has(input[name="name"])
  input[name="name"],
.participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  )
  .registration-section:has(input[name="name"])
  input[name="email"] {
  width: var(--join-auth-field-inline, min(20rem, calc(100vw - var(--shell-gutter) * 2)));
  min-width: 0;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration
  > .panel-footer.panel-footer--registration {
  display: contents;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration
  > .panel-footer.panel-footer--registration::after {
  content: none;
  display: none;
}

.participant-shell--auth-layout.participant-shell--registration .stage-overlay {
  display: block;
}

.participant-shell--auth-layout.participant-shell--registration .solo-offer-top-copy--centered {
  top: var(--offer-floating-caption-offset, calc(var(--fluid-block) * 10));
  transform: translateX(-50%);
}

.participant-shell--login-sheet .login-sheet-copy {
  justify-items: center;
  text-align: center;
}

.participant-shell--login-sheet .login-sheet-copy .panel-summary {
  text-align: center;
}

/* @lifeos-css-tier flows:end login-auth */

/* @lifeos-css-tier flows:start choice-panel */
/* ==========================================================================
   Choice panel
   ========================================================================== */

.choice-panel {
  --choice-panel-gap: var(--layout-choice-panel-gap);
  --choice-heading-inline: min(12.8ch, 100%);
  --choice-options-inline: var(--container-choice-options);
  --choice-options-gap: var(--layout-choice-options-gap);
  --choice-card-min-height: var(--choice-card-min-height-base);
  --choice-card-padding-block: var(--layout-choice-card-padding-block);
  --choice-card-padding-inline: var(--layout-choice-card-padding-inline);
  --choice-card-gap: var(--layout-choice-card-gap);
  --choice-focus-outline-color: rgba(255, 255, 255, 0.84);
  container-type: inline-size;
  container-name: adaptive-surface;
  display: grid;
  justify-items: center;
  gap: var(--choice-panel-gap);
  width: var(--container-stage);
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.choice-heading {
  width: var(--choice-heading-inline);
  margin: 0;
  color: var(--text);
  font-size: var(--type-title-large);
  font-weight: 750;
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-wrap: balance;
}

.choice-heading-line {
  display: block;
}

.choice-options {
  display: grid;
  width: var(--choice-options-inline);
  grid-template-columns: 1fr;
  gap: var(--choice-options-gap);
}

.choice-card {
  width: 100%;
  min-width: 0;
  flex-direction: column;
  min-height: var(--choice-card-min-height);
  padding: var(--choice-card-padding-block) var(--choice-card-padding-inline);
  gap: var(--choice-card-gap);
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 0;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.choice-card:focus-visible {
  outline: var(--divider-width) solid var(--choice-focus-outline-color);
  outline-offset: var(--divider-offset);
  box-shadow: none;
}

.choice-card:hover .choice-title {
  color: var(--accent);
}
.choice-card:hover .choice-subtitle {
  color: var(--text-soft);
}
.choice-card:hover {
  background: transparent;
  opacity: 1;
  box-shadow: none;
}

@container adaptive-surface (max-width: 63.999rem) {
  .participant-shell--join-choice .choice-options {
    --choice-options-gap: var(--layout-choice-options-gap-narrow);
  }

  .choice-options .choice-card + .choice-card {
    border-top: 0;
  }

  .participant-shell--join-choice .choice-options .choice-card + .choice-card::before {
    content: "";
    position: absolute;
    top: calc(var(--choice-options-gap) * -0.5);
    left: 50%;
    width: var(--choice-separator-inline-narrow);
    height: var(--line-width-thin);
    background: linear-gradient(
      90deg,
      transparent,
      var(--choice-separator-color-narrow) 28%,
      var(--choice-separator-color-narrow) 72%,
      transparent
    );
    transform: translateX(-50%);
    pointer-events: none;
  }

  .participant-shell--join-choice .choice-title {
    font-size: var(--choice-title-narrow-fluid-size);
  }

  .participant-shell--join-choice .choice-subtitle {
    font-size: var(--choice-subtitle-narrow-size);
  }

  .form-section.offer-section {
    max-width: var(--container-form-medium-local);
  }

  .offer-access-summary {
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
    font-size: var(--offer-access-summary-size);
    line-height: var(--leading-base);
    margin-top: clamp(0.85rem, calc(var(--fluid-min) * 2.6), 1.15rem);
  }

  .offer-form {
    gap: 0;
    --offer-actions-margin-top: clamp(0.28rem, calc(var(--fluid-min) * 1.2), 0.45rem);
  }

  .panel-footer {
    grid-template-columns: auto 1fr auto;
  }

  .participant-shell--profile > .panel-footer {
    display: contents;
    min-height: 0;
    max-width: none;
  }

  .participant-shell--profile .panel-spacer {
    display: none;
  }

  .panel-footer-actions {
    min-width: min(100%, var(--button-min-width));
    width: 100%;
    flex-wrap: wrap;
    gap: var(--button-group-gap);
  }

  .panel-footer-actions .action {
    min-width: var(--button-min-width);
    min-height: var(--button-min-height);
    padding-inline: var(--button-padding-inline);
    white-space: nowrap;
    font-size: var(--button-font-size);
    line-height: var(--leading-control);
  }

  .profile-screen-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--profile-stack-divider-gap);
    width: 100%;
    padding-block: clamp(1.75rem, calc(var(--fluid-block) * 4.5), 3.25rem);
  }

  .profile-screen-main::before {
    content: none;
  }

  .profile-goals-stage {
    width: min(var(--profile-goals-inline-size), 100%);
  }

  .profile-settings-section {
    position: relative;
    width: min(var(--profile-settings-inline), 100%);
    padding-top: clamp(2.1rem, calc(var(--fluid-block) * 4.8), 3rem);
  }

  .profile-settings-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--profile-stack-divider-inline);
    height: var(--divider-width);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.22) 18%,
      rgba(255, 255, 255, 0.22) 82%,
      transparent
    );
  }

}

.participant-shell--join-choice {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--viewport-height);
  overflow: hidden;
}

.participant-shell--join-choice .split-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: var(--viewport-height);
}

.participant-shell--join-choice .form-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: var(--viewport-height);
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  pointer-events: none;
}

.participant-shell--join-choice .panel-scroll {
  grid-row: 2;
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(var(--container-stage-wide), 100%);
  max-width: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  pointer-events: none;
}

.participant-shell--join-choice > .panel-footer {
  display: contents;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.participant-shell--join-choice > .panel-footer::after,
.participant-shell--join-choice > .panel-footer > .panel-spacer {
  content: none;
  display: none;
}

.participant-shell--join-choice > .panel-footer > .panel-back {
  pointer-events: auto;
}

.participant-shell--join-choice .choice-panel {
  pointer-events: auto;
  --choice-panel-gap: 0;
  gap: var(--choice-panel-gap);
}

.participant-shell--join-choice .choice-heading {
  display: none;
}

.participant-shell--join-choice .choice-options {
  margin-inline: auto;
}

.choice-title {
  font-weight: 600;
  font-size: var(--choice-title-fluid-size);
  letter-spacing: var(--tracking-none);
  line-height: var(--leading-control);
  color: var(--text);
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow: visible;
  overflow-wrap: var(--display-overflow-wrap);
  word-break: var(--display-word-break);
  hyphens: var(--display-hyphens);
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}

.choice-subtitle {
  font-weight: 400;
  font-size: var(--type-caption);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  overflow-wrap: var(--display-overflow-wrap);
  word-break: var(--display-word-break);
  hyphens: var(--display-hyphens);
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}

@container adaptive-surface (min-width: 64rem) {
  .choice-panel {
    --choice-panel-gap: var(--layout-choice-panel-gap-wide);
    --choice-options-inline: var(--container-choice-options-wide);
    --choice-options-gap: var(--layout-choice-options-gap-wide);
    --choice-card-min-height: var(--choice-card-min-height-wide);
    --choice-card-padding-inline: var(--layout-choice-card-padding-inline-wide);
    width: var(--container-stage-wide);
    max-width: 100%;
  }

  .choice-options {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .choice-card {
    border: 0;
  }

  .choice-title {
    font-size: var(--choice-title-wide-fluid-size);
  }

  .choice-subtitle {
    font-size: var(--type-small);
  }
}

@container adaptive-surface (max-width: 24rem) {
  .choice-title,
  .choice-subtitle {
    white-space: normal;
  }
}

/* @lifeos-css-tier flows:end choice-panel */

/* @lifeos-css-tier flows:start offer-flows */
/* Fullscreen offer layout: solo, group and gift share one vertical contract.
   Center content is balanced between the active top anchor and the offer form edge. */
.participant-shell--solo-offer,
.participant-shell--group-offer,
.participant-shell--gift-offer,
.participant-shell--group-readiness {
  --gift-template-rail-reserve: 0rem;
  --offer-base-gap: var(--layout-base-gap);
  --offer-viewport-edge-inset: 9%;
  --offer-edge-gap: var(--offer-viewport-edge-inset);
  --solo-offer-control-height: max(
    var(--interactive-min-size),
    clamp(2.05rem, calc(var(--fluid-inline) * 4.25), 2.45rem)
  );
  --solo-offer-text-size: var(--type-solo-offer-copy-compact);
  --gift-offer-panel-height: calc(
    var(--solo-offer-control-height) * 2 + var(--divider-width-double)
  );
  --gift-certificate-caption-size: var(--type-gift-certificate-caption-base);
  --offer-copy-inline: min(34rem, var(--container-stage-safe-inline));
  --offer-copy-inline-gift: min(34rem, var(--container-stage-safe-inline));
  --offer-gift-message-inline: min(38rem, var(--container-stage-safe-inline));
  --offer-control-inline: min(27rem, var(--container-safe-inline));
  --offer-panel-inline: var(--offer-control-inline);
  --offer-group-inline: var(--offer-control-inline);
  --offer-control-radius: var(--radius-offer-control);
  --offer-center-max-block: min(
    calc(var(--fluid-block) * 42),
    calc(var(--viewport-height) - var(--offer-bottom-reserve) - 8rem)
  );
  --offer-faq-max-block: min(calc(var(--fluid-block) * 70), calc(var(--viewport-height) - 8rem));
  --offer-status-gap: var(--layout-offer-status-gap);
  --offer-faq-gap: var(--layout-offer-faq-gap);
  --offer-faq-current-gap: var(--layout-offer-faq-current-gap);
  --offer-faq-tag-gap: var(--layout-offer-faq-tag-gap);
  --offer-faq-chip-padding-block: var(--layout-chip-padding-block);
  --offer-faq-chip-padding-inline: var(--layout-chip-padding-inline);
  --offer-hint-offset-gap: var(--layout-offer-hint-offset-gap);
  --offer-faq-heading-gap: var(--layout-offer-faq-heading-gap);
  --offer-faq-heading-gap-compact: var(--layout-offer-faq-heading-gap-compact);
  --offer-panel-scroll-padding-block: var(--layout-offer-panel-scroll-padding-block);
  --offer-panel-scroll-padding-block-compact: var(
    --layout-offer-panel-scroll-padding-block-compact
  );
  --offer-summary-offset: var(--layout-offer-summary-offset);
  --offer-floating-caption-offset: var(--offer-viewport-edge-inset);
  --group-offer-top-copy-size: calc(var(--type-small) * 2.1);
  --group-offer-top-copy-lift: calc(var(--offer-base-gap) * -1.5);
  --gift-certificate-edge-offset: var(--offer-viewport-edge-inset);
  --offer-back-zone-height: calc(var(--offer-viewport-edge-inset) + var(--safe-area-bottom));
  --offer-panel-height: calc(var(--solo-offer-control-height) * 2 + var(--divider-width-double));
  --offer-bottom-reserve: calc(
    var(--offer-panel-height) + var(--offer-viewport-edge-inset) + var(--safe-area-bottom)
  );
  --solo-offer-title-size: var(--type-solo-offer-title);
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--viewport-height);
  overflow: hidden;
}

.participant-shell--solo-offer .split-stage,
.participant-shell--group-offer .split-stage,
.participant-shell--gift-offer .split-stage,
.participant-shell--group-readiness .split-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: var(--viewport-height);
  max-height: var(--viewport-height);
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq)) .stage-overlay {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) var(--offer-bottom-reserve);
  align-items: center;
  justify-items: center;
}

:is(
    .participant-shell--solo-offer,
    .participant-shell--group-offer,
    .participant-shell--gift-offer
  ):not(:has(.stage-overlay--group-faq))
  .stage-overlay
  > * {
  z-index: 1;
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay
  > .solo-offer-top-copy:not(.solo-offer-top-copy--centered),
.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay
  > .group-offer-top-copy,
.participant-shell--offer:not(:has(.stage-overlay--group-faq)) .gift-recipient-notice {
  grid-row: 2;
  position: relative;
  top: auto;
  left: auto;
  width: var(--offer-copy-inline);
  display: grid;
  justify-items: center;
  gap: var(--offer-base-gap);
  line-height: var(--leading-control);
  transform: none;
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay
  > .solo-offer-top-copy:not(.solo-offer-top-copy--centered) {
  font-size: var(--type-solo-offer-top-copy);
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay:has(> .solo-offer-top-copy:not(.solo-offer-top-copy--centered)),
.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay:has(> .group-offer-top-copy),
.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay:has(.gift-recipient-notice) {
  grid-template-rows:
    var(--offer-edge-gap) auto minmax(0, 1fr) auto minmax(0, 1fr)
    var(--offer-bottom-reserve);
}

.group-offer-top-copy {
  margin: 0;
  color: var(--text);
  font-size: var(--group-offer-top-copy-size);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.42);
  transform: translateY(var(--group-offer-top-copy-lift));
  pointer-events: none;
}

.participant-shell--group-offer.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay
  > .group-offer-top-copy {
  font-size: var(--group-offer-top-copy-size);
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay
  > .stage-static-center,
.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay
  > .solo-offer-top-copy--centered,
.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay--group-offer
  .group-offer-center {
  grid-row: 2;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  align-self: center;
  justify-self: center;
  width: var(--offer-copy-inline-gift);
  display: grid;
  place-items: center;
  gap: var(--offer-base-gap);
  max-height: var(--offer-center-max-block);
  overflow: visible;
  transform: none;
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq)) .gift-offer-center-zone {
  grid-row: 2;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  gap: var(--offer-base-gap);
  max-height: var(--offer-center-max-block);
  overflow: visible;
  transform: none;
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay:has(> .solo-offer-top-copy:not(.solo-offer-top-copy--centered))
  > .stage-static-center {
  grid-row: 4;
  align-self: center;
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay:has(> .group-offer-top-copy)
  > .lazy-suspense-reveal {
  display: contents;
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay:has(> .group-offer-top-copy)
  .group-offer-center,
.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay:has(.gift-recipient-notice)
  .gift-offer-center-zone {
  grid-row: 4;
  align-self: center;
}

.participant-shell--offer:not(:has(.stage-overlay--group-faq)) .group-offer-center {
  width: var(--offer-group-inline);
  max-width: var(--offer-group-inline);
  gap: var(--group-offer-section-gap);
  align-content: center;
  justify-items: stretch;
  overflow: visible;
}

.participant-shell--group-offer.participant-shell--offer:not(:has(.stage-overlay--group-faq))
  .stage-overlay--group-offer
  .group-offer-center {
  align-items: start;
  justify-items: stretch;
}

.participant-shell--solo-offer .form-panel,
.participant-shell--group-offer .form-panel,
.participant-shell--gift-offer .form-panel,
.participant-shell--group-readiness .form-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: var(--viewport-height);
  padding-block: 0;
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  pointer-events: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto max(var(--offer-viewport-edge-inset), var(--safe-area-bottom));
  align-items: center;
  justify-items: center;
}

.participant-shell--solo-offer .offer-form,
.participant-shell--group-offer .offer-form {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.participant-shell--solo-offer .offer-actions::after,
.participant-shell--group-offer .offer-actions::after,
.participant-shell--gift-offer .offer-actions::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: var(--divider-width);
  background: var(--offer-control-panel-divider-color);
  transform: translateX(var(--divider-offset));
  pointer-events: none;
}

.participant-shell--group-readiness .panel-scroll {
  position: fixed;
  top: 50%;
  left: 50%;
  bottom: auto;
  width: var(--container-readiness-panel);
  display: flex;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.participant-shell--solo-offer .panel-scroll,
.participant-shell--group-offer .panel-scroll,
.participant-shell--gift-offer .panel-scroll {
  grid-row: 2;
  position: relative;
  left: auto;
  bottom: auto;
  justify-self: center;
  align-self: end;
  width: var(--offer-panel-inline);
  display: block;
  flex: none;
  padding: 0;
  transform: none;
  pointer-events: auto;
}

.participant-shell--solo-offer > .panel-footer,
.participant-shell--group-offer > .panel-footer,
.participant-shell--gift-offer > .panel-footer {
  padding-top: 0;
}

.participant-shell--solo-offer .panel-footer::after,
.participant-shell--group-offer .panel-footer::after,
.participant-shell--gift-offer .panel-footer::after {
  display: none;
}

.participant-shell--solo-offer .stage-static-title {
  font-size: var(--solo-offer-title-size);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-none);
}

.participant-shell--gift-offer .stage-static-center {
  width: var(--offer-copy-inline);
}

.gift-template-video-root,
.gift-template-video-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gift-template-video-root {
  z-index: 0;
  overflow: hidden;
  background: transparent;
}

.gift-recipient-notice {
  width: var(--offer-copy-inline);
  text-wrap: balance;
  pointer-events: none;
}

.gift-offer-center-zone {
  --gift-template-rail-reserve: var(--layout-gift-template-rail-reserve-side);
  isolation: isolate;
  width: min(100%, var(--offer-gift-message-inline));
  max-width: min(100%, var(--offer-gift-message-inline));
  justify-self: center;
}

.gift-greeting-zone {
  --gift-greeting-zone-min-height: var(--layout-gift-greeting-zone-min-height);
  --gift-greeting-inline: min(100%, calc(100% - var(--gift-template-rail-reserve, 0rem)));
  display: grid;
  place-items: center;
  gap: var(--offer-base-gap);
  width: var(--gift-greeting-inline);
  min-height: var(--gift-greeting-zone-min-height);
  text-align: center;
}

.gift-greeting-field-shell {
  --gift-greeting-fit-scale: 1;
  --gift-greeting-mobile-scale: 1;
  --gift-greeting-line-count: 1;
  --gift-greeting-field-lines: 4.5;
  --gift-greeting-frame-extra: var(--divider-width-double);
  --gift-greeting-shell-inline: var(--layout-gift-greeting-shell-inline);
  --gift-greeting-text-scale: 1.5;
  container-type: inline-size;
  container-name: gift-greeting-shell;
  --gift-greeting-font-size: clamp(
    calc(
      var(--type-gift-message-min) * var(--gift-greeting-fit-scale) *
        var(--gift-greeting-mobile-scale)
    ),
    min(
      calc(
        var(--type-gift-message-fluid-block) * var(--gift-greeting-fit-scale) *
          var(--gift-greeting-mobile-scale)
      ),
      calc(
        var(--type-gift-message-fluid-inline) * var(--gift-greeting-fit-scale) *
          var(--gift-greeting-mobile-scale)
      )
    ),
    calc(
      var(--type-gift-message-max) * var(--gift-greeting-fit-scale) *
        var(--gift-greeting-mobile-scale)
    )
  );
  --gift-greeting-text-size: clamp(
    1.15rem,
    min(calc(var(--gift-greeting-font-size) * var(--gift-greeting-text-scale)), 6cqi),
    2.5rem
  );
  --gift-greeting-field-line-height: calc(var(--gift-greeting-text-size) * var(--leading-tight));
  --gift-greeting-field-block-size: calc(
    var(--gift-greeting-field-line-height) * var(--gift-greeting-field-lines) +
      var(--gift-greeting-frame-extra)
  );
  --gift-greeting-field-padding-block: max(
    0px,
    calc(
      (
          var(--gift-greeting-field-block-size) -
            (var(--gift-greeting-field-line-height) * var(--gift-greeting-line-count))
        ) /
        2
    )
  );
  position: relative;
  display: grid;
  place-items: center;
  width: var(--gift-greeting-shell-inline);
  max-width: 100%;
  margin-inline: auto;
  min-height: var(--gift-greeting-field-block-size);
}

@supports (width: 1cqw) and (height: 1cqh) {
  .gift-greeting-field-shell {
    --gift-greeting-font-size: clamp(
      calc(0.96rem * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale)),
      min(
        calc(5.8cqi * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale)),
        calc(6cqh * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale))
      ),
      calc(2.6rem * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale))
    );
  }
}

.gift-greeting-field {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--gift-greeting-field-block-size);
  min-height: var(--gift-greeting-field-block-size);
  max-height: var(--gift-greeting-field-block-size);
  padding: var(--gift-greeting-field-padding-block) 0;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: none;
  background: transparent;
  border: 0;
  color: var(--text);
  caret-color: var(--text);
  font: inherit;
  font-size: var(--gift-greeting-text-size);
  font-weight: 750;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-none);
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
  scrollbar-width: none;
}

.gift-greeting-field::-webkit-scrollbar {
  display: none;
}

.gift-greeting-field:placeholder-shown {
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;
}

.gift-greeting-field::placeholder {
  opacity: 1;
  color: rgba(255, 255, 255, 0.72);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
  font-size: var(--gift-greeting-text-size);
  font-weight: 750;
  line-height: var(--leading-tight);
  text-align: center;
}

.gift-greeting-field::selection {
  background: rgba(255, 255, 255, 0.28);
  color: var(--text);
}

.gift-greeting-field:focus,
.gift-greeting-field:focus-visible {
  outline: 0;
  border: 0;
}

.gift-greeting-panel-hint.status-error {
  position: absolute;
  right: var(--stage-inline-gutter);
  bottom: calc(
    var(--gift-offer-panel-height) + var(--offer-back-zone-height) + var(--offer-edge-gap) +
      var(--offer-hint-offset-gap)
  );
  left: var(--stage-inline-gutter);
  z-index: 4;
  pointer-events: none;
}

.gift-certificate-caption {
  position: absolute;
  left: 50%;
  width: var(--offer-copy-inline, var(--container-stage-safe-inline));
  display: grid;
  justify-items: center;
  gap: 0.1em;
  color: var(--text);
  font-size: var(--gift-certificate-caption-size, var(--type-gift-caption));
  font-weight: 650;
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-none);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.gift-certificate-top {
  top: var(--gift-certificate-edge-offset, 9%);
}

.gift-certificate-bottom {
  bottom: var(--gift-certificate-edge-offset, 9%);
}

.gift-certificate-caption span {
  display: block;
}

.gift-certificate-message {
  --gift-certificate-message-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--offer-gift-message-inline, min(38rem, var(--container-stage-safe-inline)));
  display: grid;
  justify-items: center;
  gap: 0.06em;
  color: var(--text);
  font-size: var(--gift-certificate-message-size, var(--type-gift-certificate-message));
  font-weight: 750;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-none);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gift-certificate-message-line {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.participant-shell--gift-offer .offer-form {
  position: relative;
  gap: var(--layout-gift-offer-form-gap);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gift-template-selector {
  --gift-template-selector-gap: var(--layout-gift-template-selector-gap);
  --gift-template-dot-gap: var(--layout-gift-template-dot-gap);
  --gift-template-side-dot-gap: var(--layout-gift-template-side-dot-gap);
  --gift-template-hit-size: var(--control-gift-template-hit-size);
  --gift-template-dot-size: var(--control-gift-template-dot-size);
  --gift-template-arrow-inline: var(--control-gift-template-arrow-inline);
  --gift-template-arrow-block: var(--control-gift-template-arrow-block);
  display: grid;
  justify-items: center;
  gap: var(--gift-template-selector-gap);
  color: var(--text);
  text-align: center;
}

.gift-template-selector--side {
  --gift-template-hit-size: max(
    var(--interactive-min-size-fine),
    calc(var(--control-gift-template-hit-size) * 0.78)
  );
  --gift-template-selector-gap: calc(var(--layout-gift-template-selector-gap) * 0.55);
  --gift-template-side-dot-gap: calc(var(--layout-gift-template-side-dot-gap) * 0.6);
  position: absolute;
  top: 50%;
  right: max(var(--safe-area-right), clamp(0.4rem, calc(var(--fluid-inline) * 1.4), 0.8rem));
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: auto;
  display: grid;
  align-content: center;
  transform: translateY(-50%);
}

.gift-template-note {
  max-width: var(--container-result-local);
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--type-fine);
  font-weight: 560;
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-none);
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.34);
}

.gift-template-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gift-template-dot-gap);
}

.gift-template-selector--side .gift-template-dots {
  flex-direction: column;
  gap: var(--gift-template-side-dot-gap);
}

.gift-template-arrow-button {
  width: var(--gift-template-hit-size);
  min-width: 0;
  height: var(--gift-template-hit-size);
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0.88;
}

.gift-template-arrow-icon {
  display: block;
  width: var(--gift-template-arrow-inline);
  height: var(--gift-template-arrow-block);
  overflow: visible;
  filter: drop-shadow(0 1px 7px rgba(0, 0, 0, 0.34));
}

.gift-template-arrow-icon path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.08;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gift-template-arrow-button:hover {
  opacity: 1;
}

.gift-template-arrow-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.18);
}

.gift-template-dot {
  position: relative;
  width: var(--gift-template-hit-size);
  min-width: 0;
  height: var(--gift-template-hit-size);
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
}

.gift-template-dot::before {
  content: "";
  display: block;
  width: var(--gift-template-dot-size);
  height: var(--gift-template-dot-size);
  border: var(--divider-width) solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
}

.gift-template-dot[aria-pressed="true"]::before {
  border-color: rgb(255, 247, 231);
  background: rgb(255, 247, 231);
}

.gift-template-dot:hover::before {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.88);
}

.gift-template-dot:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.24);
}

.participant-shell--solo-offer .offer-control-panel__option,
.participant-shell--group-offer .offer-control-panel__option,
.participant-shell--gift-offer .offer-control-panel__option {
  --button-min-height: var(--solo-offer-control-height);
  --button-padding-block: calc(var(--offer-base-gap) * 0.85);
  --button-padding-inline: calc(var(--offer-base-gap) * 1.4);
  --button-font-size: var(--solo-offer-text-size);
}

.participant-shell--solo-offer .offer-actions,
.participant-shell--group-offer .offer-actions,
.participant-shell--gift-offer .offer-actions {
  margin-top: var(--button-group-gap);
}

.participant-shell--solo-offer .offer-actions,
.participant-shell--group-offer .offer-actions,
.participant-shell--gift-offer .offer-actions {
  position: relative;
  gap: 0;
  margin-top: 0;
  overflow: hidden;
  border: 0;
  border-top: var(--divider-width) solid var(--offer-control-panel-divider-color);
  border-radius: 0;
  background: transparent;
}

.participant-shell--solo-offer .offer-details-button,
.participant-shell--solo-offer .offer-pay-button,
.participant-shell--group-offer .offer-details-button,
.participant-shell--group-offer .offer-pay-button,
.participant-shell--gift-offer .offer-details-button,
.participant-shell--gift-offer .offer-pay-button {
  --button-min-height: var(--solo-offer-control-height);
  --button-padding-block: calc(var(--offer-base-gap) * 0.85);
  --button-padding-inline: calc(var(--offer-base-gap) * 1.4);
  --button-font-size: var(--solo-offer-text-size);
}

.participant-shell--solo-offer .offer-details-button,
.participant-shell--solo-offer .offer-pay-button,
.participant-shell--group-offer .offer-details-button,
.participant-shell--group-offer .offer-pay-button,
.participant-shell--gift-offer .offer-details-button,
.participant-shell--gift-offer .offer-pay-button {
  border-radius: 0;
}

.participant-shell--solo-offer .offer-pay-button,
.participant-shell--group-offer .offer-pay-button,
.participant-shell--gift-offer .offer-pay-button {
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

.offer-pay-action {
  font-weight: 900;
  font-variation-settings: "wght" 900;
}

.offer-pay-label,
.offer-pay-shimmer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  max-width: 100%;
}

.offer-pay-price {
  font-weight: 900;
  font-variation-settings: "wght" 900;
}

.participant-shell--solo-offer .offer-details-button,
.participant-shell--solo-offer .offer-pay-button,
.participant-shell--solo-offer .offer-switch-tab,
.participant-shell--group-offer .offer-details-button,
.participant-shell--group-offer .offer-pay-button,
.participant-shell--group-offer .offer-switch-tab,
.participant-shell--gift-offer .offer-details-button,
.participant-shell--gift-offer .offer-pay-button,
.participant-shell--gift-offer .offer-switch-tab {
  transition: none;
}

.participant-shell--solo-offer .offer-details-button:hover,
.participant-shell--solo-offer .offer-pay-button:hover,
.participant-shell--solo-offer .offer-switch-tab:hover:not([aria-pressed="true"]),
.participant-shell--group-offer .offer-details-button:hover,
.participant-shell--group-offer .offer-pay-button:hover,
.participant-shell--group-offer .offer-switch-tab:hover:not([aria-pressed="true"]),
.participant-shell--gift-offer .offer-details-button:hover,
.participant-shell--gift-offer .offer-pay-button:hover,
.participant-shell--gift-offer .offer-switch-tab:hover:not([aria-pressed="true"]) {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.participant-shell--solo-offer .offer-details-button:active,
.participant-shell--solo-offer .offer-pay-button:active,
.participant-shell--solo-offer .offer-switch-tab:active,
.participant-shell--group-offer .offer-details-button:active,
.participant-shell--group-offer .offer-pay-button:active,
.participant-shell--group-offer .offer-switch-tab:active,
.participant-shell--gift-offer .offer-details-button:active,
.participant-shell--gift-offer .offer-pay-button:active,
.participant-shell--gift-offer .offer-switch-tab:active {
  transform: none;
  background: rgba(255, 255, 255, 0.13);
  color: var(--text);
}

.participant-shell--solo-offer .offer-details-button:focus-visible,
.participant-shell--solo-offer .offer-pay-button:focus-visible,
.participant-shell--solo-offer .offer-switch-tab:focus-visible,
.participant-shell--group-offer .offer-details-button:focus-visible,
.participant-shell--group-offer .offer-pay-button:focus-visible,
.participant-shell--group-offer .offer-switch-tab:focus-visible,
.participant-shell--gift-offer .offer-details-button:focus-visible,
.participant-shell--gift-offer .offer-pay-button:focus-visible,
.participant-shell--gift-offer .offer-switch-tab:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.participant-shell--offer .offer-control-panel__option[aria-pressed="true"],
.participant-shell--offer .offer-control-panel__option[aria-pressed="true"]:hover,
.participant-shell--offer .offer-control-panel__option[aria-pressed="true"]:active {
  background: var(--offer-control-panel-selected-bg);
  color: var(--offer-control-panel-selected-text);
}

.solo-offer-top-copy {
  top: var(--offer-floating-caption-offset, calc(var(--fluid-block) * 10));
  display: grid;
  justify-items: center;
  gap: var(--offer-base-gap, var(--layout-base-gap));
  color: var(--text);
  font-size: var(--type-solo-offer-top-copy);
  font-weight: 650;
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-none);
}

.solo-offer-top-copy span {
  display: block;
  white-space: nowrap;
  line-height: var(--leading-control);
}

.solo-offer-top-copy--centered {
  top: 50%;
  transform: translate(-50%, -50%);
}

.participant-shell--solo-offer .form-panel .panel-scroll,
.participant-shell--group-offer .form-panel .panel-scroll,
.participant-shell--gift-offer .form-panel .panel-scroll {
  padding-block: 0;
}

.participant-shell--solo-offer.participant-shell--offer .form-panel .panel-scroll {
  width: var(--container-offer-scroll);
}

.participant-shell--solo-offer .stage-static-title {
  font-size: var(--solo-offer-title-size);
  line-height: var(--leading-tight);
}

.stage-status-hint {
  display: grid;
  justify-items: center;
  gap: var(--offer-status-gap);
  max-width: var(--container-stage-status);
  margin: 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.44);
}

.stage-status-hint strong,
.stage-status-hint span {
  display: block;
  white-space: normal;
  text-wrap: balance;
}

.stage-status-hint strong {
  color: var(--text-strong);
  font-size: var(--type-body);
  font-weight: 750;
  line-height: var(--leading-control);
}

.stage-status-hint span {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--type-small);
  font-weight: 450;
  line-height: var(--leading-caption);
}

.group-offer-center {
  --group-offer-panel-scale: 1;
  --group-offer-floating-inline: var(--accordion-inline);
  --group-offer-floating-max-block: min(
    calc(var(--fluid-block) * 52),
    calc(var(--viewport-height) - var(--space-6) * 5.6)
  );
  --group-offer-copy-size: var(--group-offer-copy-size-base);
  --group-offer-heading-size: var(--group-offer-heading-size-base);
  --group-offer-copy-leading: calc(1em + var(--offer-base-gap) * 0.68);
  --group-offer-section-gap: calc(var(--offer-base-gap) * 2);

  position: absolute;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--group-offer-panel-scale));
  width: var(--group-offer-floating-inline);
  max-height: var(--group-offer-floating-max-block);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color: var(--text);
  text-align: left;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

.group-offer-center::-webkit-scrollbar {
  display: none;
}

.stage-overlay--group-faq .group-offer-center {
  top: 50%;
  width: var(--group-offer-floating-inline);
  max-height: var(--offer-faq-max-block);
}

.participant-shell--offer:has(.stage-overlay--group-faq) .stage-overlay--group-faq,
.participant-shell--offer:has(.stage-overlay--group-faq) .form-panel {
  display: grid;
  grid-template-rows: minmax(var(--layout-route-row-start), 1fr) auto minmax(
      var(--layout-route-row-end),
      1fr
    );
  align-items: stretch;
  justify-items: center;
}

.participant-shell--offer:has(.panel-scroll--offer-faq) .stage-overlay > * {
  display: none;
}

.participant-shell--offer:has(.stage-overlay--group-faq)
  .stage-overlay--group-faq
  .group-offer-center {
  grid-row: 2;
  position: relative;
  top: auto;
  left: auto;
  align-self: center;
  justify-self: center;
  transform: none;
}

.participant-shell--offer:has(.stage-overlay--group-faq) .form-panel .panel-scroll--offer-faq {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: min(var(--accordion-inline), 100%);
  max-width: var(--accordion-inline);
  display: grid;
  align-content: safe center;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.participant-shell--offer:has(.stage-overlay--group-faq)
  .form-panel
  .panel-scroll--offer-faq
  .group-offer-center {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-height: none;
  transform: none;
}

.participant-shell--offer:has(.stage-overlay--group-faq) .form-panel .panel-footer {
  display: contents;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.group-offer-copy h1 {
  margin: 0 0 var(--offer-faq-heading-gap);
  color: var(--text);
  font-size: var(--type-title-medium);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-none);
  text-wrap: balance;
  text-align: left;
}

.group-offer-copy {
  text-align: left;
}

.group-offer-copy .group-offer-inline-title {
  margin-bottom: 0;
  font-size: var(--group-offer-heading-size);
  line-height: var(--leading-caption);
  font-weight: 900;
  text-align: left;
}

.group-offer-copy .group-offer-inline-title,
.group-offer-copy .group-offer-practice-label,
.group-offer-copy h1 {
  width: 100%;
  margin-inline-start: 0;
}

.group-offer-copy p {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--type-small);
  line-height: var(--leading-comfort);
  letter-spacing: var(--tracking-none);
  text-wrap: pretty;
}

.group-offer-copy:not(.group-offer-copy--faq) p:not(.group-offer-practice-label) {
  font-size: var(--group-offer-copy-size);
  font-weight: 500;
  line-height: var(--group-offer-copy-leading);
}

.group-offer-copy:not(.group-offer-copy--faq) {
  text-align: left;
}

.group-offer-copy:not(.group-offer-copy--faq) p {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  max-width: 100%;
}

.group-offer-copy > p + p {
  margin-top: var(--offer-base-gap);
}

.group-offer-copy .group-offer-practice-label {
  margin-top: var(--group-offer-section-gap);
  color: var(--text);
  font-size: var(--group-offer-heading-size);
  font-weight: 900;
  line-height: var(--leading-caption);
  text-align: left;
}

.offer-control-panel__options.offer-switch-tabs {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.offer-control-panel .offer-switch-tab {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
}

.offer-control-panel .offer-switch-tab[aria-pressed="true"] {
  background: var(--offer-control-panel-selected-bg);
  color: rgba(0, 0, 0, 0.86);
  font-weight: 600;
}

.participant-shell--solo-offer .offer-control-panel .offer-switch-tab[aria-pressed="true"]:hover,
.participant-shell--group-offer .offer-control-panel .offer-switch-tab[aria-pressed="true"]:hover,
.participant-shell--gift-offer .offer-control-panel .offer-switch-tab[aria-pressed="true"]:hover {
  color: rgba(0, 0, 0, 0.9);
}

button.offer-details-button {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

/* ==========================================================================
   Segmented control — pill selector для взаимоисключающих опций
   ========================================================================== */

.segmented-control {
  display: grid;
  gap: var(--layout-control-gap);
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.segmented-control > legend {
  padding: 0;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: calc(var(--adaptive-detail-size) * 0.82);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label-wide);
  text-align: center;
}

.segments {
  --segments: 1;
  --segment-index: 0;
  --button-group-gap: var(--layout-base-gap);

  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--segments), 1fr);
  padding: var(--segmented-inset);
  background: var(--surface-soft);
  border: var(--divider-width) solid var(--hairline);
  border-radius: var(--radius-pill);
  isolation: isolate;
}

.segments-thumb {
  position: absolute;
  top: var(--segmented-inset);
  left: var(--segmented-inset);
  bottom: var(--segmented-inset);
  width: calc((100% - var(--segmented-inset) * 2) / var(--segments));
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: var(--divider-width) solid var(--line-1);
  transform: translateX(calc(var(--segment-index) * 100%));
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.segments:has(.segment:nth-of-type(2)) {
  --segments: 2;
}

.segments:has(.segment:nth-of-type(3)) {
  --segments: 3;
}

.segments:has(.segment:nth-of-type(4)) {
  --segments: 4;
}

.segments:has(.segment:nth-of-type(5)) {
  --segments: 5;
}

.segments:has(.segment:nth-of-type(6)) {
  --segments: 6;
}

.segments:has(.segment:nth-of-type(1) input:checked),
.segments:has(.segment:nth-of-type(1)[aria-pressed="true"]) {
  --segment-index: 0;
}

.segments:has(.segment:nth-of-type(2) input:checked),
.segments:has(.segment:nth-of-type(2)[aria-pressed="true"]) {
  --segment-index: 1;
}

.segments:has(.segment:nth-of-type(3) input:checked),
.segments:has(.segment:nth-of-type(3)[aria-pressed="true"]) {
  --segment-index: 2;
}

.segments:has(.segment:nth-of-type(4) input:checked),
.segments:has(.segment:nth-of-type(4)[aria-pressed="true"]) {
  --segment-index: 3;
}

.segments:has(.segment:nth-of-type(5) input:checked),
.segments:has(.segment:nth-of-type(5)[aria-pressed="true"]) {
  --segment-index: 4;
}

.segments:has(.segment:nth-of-type(6) input:checked),
.segments:has(.segment:nth-of-type(6)[aria-pressed="true"]) {
  --segment-index: 5;
}

.segment {
  position: relative;
  z-index: 1;
  color: var(--text-muted);
  letter-spacing: var(--tracking-body);
  cursor: pointer;
  user-select: none;
  transition: color var(--dur) var(--ease-out);
}

.segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segment:has(input:focus-visible) {
  box-shadow: 0 0 0 2px rgba(232, 225, 204, 0.45);
  border-radius: var(--radius-pill);
}

.segment:hover:not(:has(input:checked)) {
  color: var(--text-soft);
}

.segment:has(input:checked) {
  color: var(--text);
  font-weight: 600;
}

.segment:active:not(:has(input:disabled)) {
  transform: scale(0.985);
}

.segment:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.legacy-course-course-segments .legacy-course-course-tab {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: var(--legacy-course-switch-height);
  padding: var(--legacy-course-tab-padding-block) var(--legacy-course-tab-padding-inline);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--type-control);
  font-weight: 650;
  line-height: var(--lh-snug);
  text-align: center;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: hidden;
  flex-shrink: 1;
  transition: none;
}

.legacy-course-course-segments .legacy-course-course-tab:hover:not(:disabled),
.legacy-course-course-segments .legacy-course-course-tab--format:hover {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  transform: none;
}

@container adaptive-surface (max-width: 24rem) {
  .legacy-course-course-segments .legacy-course-course-tab {
    min-height: max(var(--interactive-min-size), var(--legacy-course-tab-min-height-compact));
    padding-inline: var(--legacy-course-tab-padding-inline-compact);
    font-size: var(--type-control);
  }
}

.tariff-summary {
  --tariff-summary-gap: var(--layout-tariff-summary-gap);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--tariff-summary-gap);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-body);
  text-align: center;
  margin: 0;
}

.tariff-summary [data-tariff-price] {
  color: var(--text);
  font-weight: 600;
  letter-spacing: var(--tracking-soft-tight);
}

.tariff-summary [aria-hidden] {
  color: var(--text-faint);
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.check-row input {
  width: auto;
  margin-top: 0.25em;
  accent-color: var(--accent);
}

.rules-list {
  display: grid;
  gap: var(--space-2);
  padding-left: 0;
  list-style: none;
  color: var(--text-soft);
  font-size: var(--form-list-copy-size);
  line-height: var(--leading-relaxed);
}

.rules-copy {
  display: grid;
  gap: var(--accordion-body-gap);
  width: 100%;
  min-width: 0;
  justify-items: stretch;
  color: var(--text-soft);
  text-align: left;
}

.rules-intro {
  display: grid;
  gap: var(--accordion-body-gap);
}

.rules-copy-section {
  display: grid;
  gap: var(--accordion-body-gap);
}

.rules-copy h2 {
  margin: 0;
  max-width: 100%;
  color: var(--text);
  font-size: var(--accordion-title-size);
  font-weight: 700;
  letter-spacing: var(--tracking-none);
  line-height: var(--accordion-title-line-height);
  overflow-wrap: break-word;
}

@media (max-width: 63.99rem) {
  .rules-copy h2 {
    font-size: var(--accordion-title-size-compact);
  }
}

@media (min-width: 64rem) {
  .rules-copy h2 {
    font-size: var(--accordion-title-size);
  }
}

.rules-intro p:first-child {
  color: var(--text-strong);
  font-weight: 800;
}

.rules-consent-section {
  --rules-consent-gap: var(--accordion-stack-gap);
  --rules-form-gap: var(--layout-form-gap);
  --rules-form-offset: 0;
  --rules-action-gap: var(--layout-action-gap);
  --rules-action-padding-block: var(--rules-action-padding-block-base);
  --rules-action-padding-inline: var(--rules-action-padding-inline-base);
  --rules-start-padding-block: var(--rules-start-padding-block-base);
  --rules-start-padding-inline: var(--rules-start-padding-inline-base);
  --rules-start-border: rgba(255, 255, 255, 0.5);
  --rules-start-color: var(--text-soft);
  --rules-hint-color: var(--text-muted);
  --rules-input-inline: min(9.5rem, 100%);
  --rules-input-min-inline: min(8rem, 100%);
  --rules-input-min-height: var(--field-rules-input-min-height);
  --rules-input-padding-block-start: var(--field-rules-input-padding-block-start);
  --rules-input-padding-block-end: var(--field-rules-input-padding-block-end);
  --rules-input-border-color: var(--form-field-border-color);
  --rules-input-placeholder-color: var(--form-field-text-color);
  --rules-input-focus-border-color: var(--form-field-border-color-focus);
  --rules-submit-border: var(--form-action-border);
  --rules-submit-color: var(--form-action-color);
  --rules-contact-border: rgba(255, 255, 255, 0.56);
  --rules-contact-color: rgba(255, 255, 255, 0.88);
  --rules-payment-error-color: #ff6b5e;
  --rules-action-min-height: var(--rules-action-min-height-base);
  --rules-start-min-height: var(--rules-start-min-height-base);
  display: grid;
  grid-template-rows: auto auto;
  width: 100%;
  max-width: 100%;
  gap: var(--rules-consent-gap);
}

.rules-consent-form {
  display: grid;
  justify-items: center;
  gap: var(--rules-form-gap);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  text-align: center;
}

.rules-consent-section > .rules-consent-form {
  text-align: center;
}

.rules-consent-form:has(.rules-consent-start-button),
.rules-consent-form:has(.rules-payment-controls) {
  margin-top: var(--rules-form-offset);
}

.rules-consent-input-line {
  display: inline-grid;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
}

.rules-consent-start-button,
.rules-consent-section .rules-payment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: auto;
  min-height: var(--rules-start-min-height);
  padding: var(--rules-start-padding-block) var(--rules-start-padding-inline);
  border: var(--divider-width) solid var(--rules-start-border);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--rules-start-color);
  font-size: var(--type-small);
  font-weight: 500;
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-none);
  text-align: center;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  transform: none;
}

.rules-consent-start-button:hover,
.rules-consent-start-button:focus-visible,
.rules-consent-section .rules-payment-submit:hover:not(:disabled),
.rules-consent-section .rules-payment-submit:focus-visible {
  border-color: var(--rules-start-border);
  background-color: transparent;
  color: var(--rules-start-color);
  opacity: 1;
}

.rules-consent-start-button:active:not(:disabled),
.rules-consent-section .rules-payment-submit:active:not(:disabled) {
  opacity: 1;
  transform: none;
}

.rules-consent-section .rules-payment-submit .offer-pay-action,
.rules-consent-section .rules-payment-submit .offer-pay-price {
  font-weight: 500;
  font-variation-settings: "wght" 500;
}

.rules-consent-start-label {
  --text-shimmer-base: rgba(255, 255, 255, 0.62);
  --text-shimmer-glow: rgba(232, 240, 255, 0.86);
  --text-shimmer-bright: var(--text-strong);
}

.rules-payment-controls {
  display: grid;
  justify-items: center;
  row-gap: var(--space-3);
  width: var(--container-form-narrow-local);
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.rules-payment-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--rules-action-gap);
  width: fit-content;
  max-width: 100%;
}

.rules-consent-form .form-hint {
  justify-self: center;
  width: var(--measure-hint);
  margin: 0;
  color: var(--rules-hint-color);
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.rules-consent-form .status-error {
  justify-self: center;
  width: 100%;
  max-width: var(--container-feedback-local);
  text-align: center;
}

.rules-consent-hint-label {
  --text-shimmer-base: rgba(255, 255, 255, 0.38);
  --text-shimmer-glow: rgba(232, 240, 255, 0.74);
  --text-shimmer-bright: rgba(255, 255, 255, 0.88);
}

.rules-consent-section .rules-consent-input-line input {
  width: var(--rules-input-inline);
  min-width: var(--rules-input-min-inline);
  max-width: 100%;
  field-sizing: content;
  min-height: var(--rules-input-min-height);
  padding: var(--rules-input-padding-block-start) 0 var(--rules-input-padding-block-end);
  border: 0;
  border-bottom: var(--form-field-border-width) solid var(--rules-input-border-color);
  background: transparent;
  color: var(--form-field-text-color);
  font-size: var(--type-small);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-none);
  text-align: center;
  box-shadow: none;
}

.rules-consent-section .rules-consent-input-line input::placeholder {
  color: var(--rules-input-placeholder-color);
  font-weight: 700;
  opacity: 1;
}

.rules-consent-section .rules-consent-input-line input:focus,
.rules-consent-section .rules-consent-input-line input:focus-visible {
  border-bottom-color: var(--rules-input-focus-border-color);
}

.participant-shell--registration .rules-consent-section .rules-payment-submit,
.participant-shell--gift-activation-rules .rules-consent-section .rules-payment-submit {
  justify-self: center;
}

.rules-consent-section .rules-payment-contact {
  min-height: var(--rules-action-min-height);
  padding: var(--rules-action-padding-block) var(--rules-action-padding-inline);
  border: var(--divider-width) solid var(--rules-contact-border);
  background: transparent;
  color: var(--rules-contact-color);
  font-size: var(--type-small);
  box-shadow: none;
}

.rules-consent-section .rules-payment-contact:hover {
  border-color: var(--rules-contact-border);
  background: transparent;
  color: var(--rules-contact-color);
}

@media (max-width: 38rem) {
  .rules-payment-controls {
    width: 100%;
  }

  .rules-payment-actions {
    display: grid;
    justify-items: center;
    width: 100%;
  }
}

/* @lifeos-css-tier flows:end offer-flows */

/* @lifeos-css-tier flows:start payment-flows */
.payment-inline-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  display: grid;
  align-content: end;
  justify-items: center;
  gap: var(--space-2);
  padding-block: var(--shell-gutter) calc(var(--shell-gutter) + var(--safe-area-bottom));
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  background: transparent;
  color: var(--text-strong);
  pointer-events: none;
}

.payment-inline-overlay--actions {
  align-content: center;
}

@media (min-width: 64rem) {
  .participant-shell--join-solo .payment-inline-overlay,
  .participant-shell--join-group .payment-inline-overlay,
  .participant-shell--join-gift .payment-inline-overlay {
    left: 50%;
    right: 0;
    width: 50%;
  }
}

@media (max-width: 63.999rem) {
  .participant-shell--join-solo .payment-inline-overlay--actions,
  .participant-shell--join-group .payment-inline-overlay--actions,
  .participant-shell--join-gift .payment-inline-overlay--actions {
    padding-top: var(--layout-block-payment-overlay-offset);
    padding-bottom: calc(var(--control-md) + var(--shell-gutter) + var(--safe-area-bottom));
  }
}

.payment-inline-action,
.payment-inline-dev-action,
.payment-inline-status,
.payment-inline-error {
  z-index: 1;
  pointer-events: auto;
}

.payment-inline-status {
  margin: 0;
  max-width: min(100%, var(--copy-width));
  color: var(--text-strong);
  font-size: var(--payment-inline-copy-size);
  line-height: var(--leading-snug);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

.payment-inline-error {
  margin: 0;
  color: var(--feedback-error-color);
  font-size: var(--payment-inline-copy-size);
  line-height: var(--leading-snug);
  text-align: center;
}

.payment-provider-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  contain: layout paint;
  isolation: isolate;
  display: grid;
  place-items: stretch;
  background: var(--surface-canvas);
  color: var(--text);
  overflow: hidden;
}

.payment-provider-waiting {
  position: relative;
  z-index: 3;
  grid-area: 1 / 1;
  container-type: inline-size;
  container-name: adaptive-surface;
  display: grid;
  place-items: center;
  min-height: var(--viewport-height);
  padding: var(--shell-gutter);
  text-align: center;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.payment-provider-waiting[data-state="hidden"] {
  opacity: 0;
}

.payment-provider-waiting-content {
  display: grid;
  place-items: center;
  width: 100%;
}

.payment-provider-waiting-label {
  --text-shimmer-base: rgba(255, 255, 255, 0.54);
  --text-shimmer-glow: rgba(232, 240, 255, 0.82);
  --text-shimmer-bright: rgba(255, 255, 255, 0.92);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--payment-waiting-label-size);
  font-weight: 650;
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

.payment-provider-frame {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  contain: layout paint;
  width: 100%;
  height: var(--viewport-height);
  background: transparent;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.payment-provider-frame[data-state="ready"] {
  opacity: 1;
}

.payment-provider-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.payment-provider-iframe {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  z-index: var(--z-payment-provider-frame) !important;
}

.payment-provider-iframe[data-life-payment-frame-visibility="hidden"] {
  visibility: hidden !important;
}

.payment-provider-iframe[data-life-payment-frame-visibility="visible"] {
  visibility: visible !important;
}

.group-payment-success-shell {
  min-height: var(--viewport-height);
  display: grid;
  place-items: center;
  padding: var(--shell-gutter);
  background: var(--surface-canvas);
  color: var(--text-strong);
}

.group-payment-success {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--copy-width);
  text-align: center;
}

.group-payment-success h1 {
  color: var(--text);
  font-size: var(--payment-success-heading-size);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

.group-payment-success p {
  color: var(--text-soft);
  font-size: var(--payment-success-copy-size);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Payment / stack result
   ========================================================================== */

.payment-card {
  display: grid;
  container-type: inline-size;
  container-name: adaptive-surface;
  gap: var(--space-4);
  padding-block: max(var(--space-5), var(--safe-area-top))
    max(var(--space-5), var(--safe-area-bottom));
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  min-height: var(--viewport-height);
  align-content: center;
  justify-items: center;
  text-align: center;
  background: transparent;
}

.payment-card > * {
  width: 100%;
  max-width: var(--copy-width);
}

.payment-card h1 {
  font-size: var(--type-title-large);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

.payment-card p {
  font-size: var(--type-body);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* @lifeos-css-tier flows:end payment-flows */

/* @lifeos-css-tier flows:start flow-overlays */
/* Stage dimming lives in .focus-backdrop__scrim via --focus-backdrop-scrim. */

/* @lifeos-css-tier flows:end flow-overlays */

/* @lifeos-css-tier flows:start join-choice-overlay */
/* @lifeos-css-tier flows:end join-choice-overlay */