@layer lifeos.reset, lifeos.tokens, lifeos.layout, lifeos.components, lifeos.routes, lifeos.overrides;

@layer lifeos.routes {
  /* Generated pre-registration flow styles. Requires site.css tokens and #root app variables. */

  /* No video blur on gift selection, giver registration, and recipient registration screens. */
  .participant-shell--join-gift,
  .participant-shell--gift-activation {
    --focus-backdrop-blur: 0px;
  }

  .participant-shell--join-gift .focus-backdrop__blur,
  .participant-shell--gift-activation .focus-backdrop__blur {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .participant-shell--login,
  .participant-shell--auth-layout {
    --login-scale: 1.2;
    --login-type-control-scaled: calc(var(--type-login-control) * var(--login-scale));
    --login-type-small-scaled: calc(var(--type-login-small) * var(--login-scale));
    --login-panel-inline: var(--container-readable-wide);
    --login-panel-offset: var(--layout-login-panel-offset);
    --login-action-inline: var(--container-feedback-local);
    --login-contact-column-inline: var(--container-login-contact-inline);
    --login-action-min-height: max(
      calc(var(--button-min-height) * var(--login-scale)),
      calc(var(--interactive-min-size) * var(--login-scale)),
      calc(var(--layout-login-action-min-height-floor) * var(--login-scale))
    );
    --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: calc(var(--layout-stack-gap) * var(--login-scale));
  }

  .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: 100svh;
    overflow: hidden;
  }

  /* var() in @media is unreliable in preview browsers; 64rem matches --viewport-query-split-wide. */
  @media (max-width: 63.999rem) {
    .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) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
      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):not(.participant-shell--goal-composition)
      > .split-stage {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 0;
      max-height: none;
    }

    .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 {
      grid-column: 1;
      grid-row: 2;
      align-self: end;
      width: 100%;
      min-width: 0;
      height: auto;
      min-height: 0;
      max-height: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      align-content: start;
      background: var(--split-panel-surface);
      overflow: visible;
      transform: none;
      pointer-events: auto;
      container-type: normal;
      container-name: none;
    }

    .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
      > .panel-scroll.panel-scroll--join-identity {
      grid-row: 1;
      align-self: stretch;
      justify-self: center;
      max-height: 100%;
      padding-block: var(--registration-identity-stack-gap, var(--space-5));
      padding-bottom: max(
        var(--safe-area-bottom),
        var(--registration-identity-stack-gap, var(--space-5))
      );
    }
  }

  .participant-shell--login .split-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100svh;
  }

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

  .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: 100svh;
    --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: calc(
      100svh *
        var(--scale-half)
    );
    --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) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
      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):not(.participant-shell--goal-composition)
      > .split-stage {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      min-width: 0;
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
    }

    .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 {
      grid-column: 2;
      grid-row: 1;
      align-self: stretch;
      width: 100%;
      min-width: 0;
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
      background: var(--split-panel-surface);
      pointer-events: auto;
      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):not(.participant-shell--goal-composition)
      > .form-panel
      > .panel-scroll.panel-scroll--join-identity {
      grid-row: 2;
      align-self: center;
      justify-self: center;
    }
  }

  .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);
    max-height: calc(
      100svh -
        max(var(--safe-area-top), var(--space-4)) - max(var(--safe-area-bottom), var(--space-4))
    );
    display: grid;
    gap: var(--login-panel-gap);
    justify-items: center;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0;
    scrollbar-width: none;
    text-align: center;
    pointer-events: auto;
  }

  .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::-webkit-scrollbar,
  .participant-shell--login .panel-scroll::-webkit-scrollbar {
    display: 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
    > .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);
    --login-panel-optical-rise: 2svh;
    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);
    max-height: calc(
      100svh -
        max(var(--safe-area-top), var(--space-4)) - max(var(--safe-area-bottom), var(--space-4))
    );
    justify-items: center;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    transform: translateY(calc(-1 * var(--login-panel-optical-rise)));
  }

  .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[data-login-copy="contact"] {
    max-width: var(--copy-wide);
    gap: var(--login-unit-gap);
  }

  .participant-shell--login .login-copy[data-login-copy="contact"] {
    --login-contact-scale: 1.1;

    gap: var(--layout-stack-gap-tight);
  }

  .participant-shell--login .login-copy:has(.login-missing-actions) .stage-phrase-title,
  .participant-shell--login .login-copy[data-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[data-login-copy="contact"] .stage-phrase-title {
    display: grid;
    gap: var(--ornament-gap-md);
    font-size: calc(var(--login-contact-title-size) * var(--login-contact-scale, 1));
    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[data-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[data-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: var(--container-login-missing-action-inline);

    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 {
    --login-contact-scale: calc(1.1 * var(--scale-row));

    display: grid;
    grid-template-columns: minmax(0, var(--login-contact-column-inline));
    gap: calc(var(--layout-control-gap) * var(--login-contact-scale));
    justify-items: center;
  }

  .participant-shell--login .login-contact-actions .action {
    width: calc(var(--login-action-inline) * var(--scale-row));
    min-height: calc(var(--login-action-min-height) * var(--login-contact-scale));
    padding-inline: calc(
      var(--button-padding-inline) * var(--login-scale) * var(--login-contact-scale)
    );
    border: var(--divider-width) solid var(--login-action-border);
    background: transparent;
    color: var(--login-action-color);
    font-size: calc(var(--login-type-control-scaled) * var(--login-contact-scale));
    font-weight: 420;
    line-height: var(--leading-control);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .participant-shell--login .login-support-contact-link {
    position: absolute;
    left: 50%;
    bottom: var(--layout-support-bottom-offset);
    z-index: 1;
    width: fit-content;
    font-size: calc(var(--fs-xxs) * var(--login-scale));
    opacity: 0.74;
    transform: translateX(-50%);
    pointer-events: auto;
  }

  .participant-shell--offer:has(.panel-scroll--offer-faq) .offer-faq-support-contact-link {
    position: fixed;
    left: 50%;
    bottom: var(--layout-support-bottom-offset);
    z-index: 4;
    width: fit-content;
    font-size: var(--fs-xxs);
    opacity: 0.74;
    transform: translateX(-50%);
    pointer-events: auto;
  }

  .participant-shell--login .login-contact-meta-footnote {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc(var(--layout-support-bottom-offset) + 100svh * 0.1);
    z-index: 1;
    width: min(
      var(--login-panel-inline),
      calc(100% - var(--panel-safe-gutter-start) - var(--panel-safe-gutter-end))
    );
    max-width: calc(100% - var(--panel-safe-gutter-start) - var(--panel-safe-gutter-end));
    margin: 0;
    font-size: calc(
      var(--fs-xxs) * var(--scale-copy-subtle) * var(--login-scale) *
        var(--login-contact-scale, 1.1) * var(--scale-half)
    );
    line-height: var(--leading-snug);
    color: var(--text-muted);
    letter-spacing: var(--tracking-none);
    text-align: center;
    text-wrap: balance;
    opacity: 0.52;
    transform: translateX(-50%);
    pointer-events: 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: calc(var(--button-padding-inline) * var(--login-scale));
    border: var(--divider-width) solid var(--login-action-border);
    background: transparent;
    color: var(--login-action-color);
    font-size: var(--login-type-control-scaled);
    font-weight: 420;
    line-height: var(--leading-control);
    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 {
    -webkit-appearance: none;
    appearance: none;
    min-height: calc(var(--button-min-height-compact) * var(--login-scale));
    padding: calc(var(--button-padding-block) * var(--login-scale))
      calc(var(--button-padding-inline) * var(--login-scale));
    border: var(--divider-width) solid var(--login-action-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--login-action-color);
    font-size: var(--login-type-small-scaled);
    font-weight: 420;
    line-height: var(--leading-control);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .participant-shell--login .login-missing-retry:hover:not(:disabled) {
    border-color: var(--login-action-border-hover);
    background: transparent;
    color: var(--login-action-color-hover);
    opacity: 1;
  }

  @container adaptive-surface (max-width: var(--container-query-wide)) {
    .participant-shell--login .login-copy:has(.login-missing-actions),
    .participant-shell--login .login-copy[data-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-type-control-scaled);
    --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 {
    width: fit-content;
    max-width: min(var(--container-form-local), 100%);
    justify-self: center;
    margin-inline: auto;
  }

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

  .participant-shell--login .login-access-caption,
  .participant-shell--auth-layout .login-access-caption {
    margin: 0;
    font-size: var(--login-type-control-scaled, 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(--login-type-small-scaled, 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: calc(var(--control-lg) * var(--login-scale));
    --login-email-line-height: var(--leading-control);
    --login-email-padding-block-end: var(--layout-login-email-padding-block-end);

    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(calc(13.5rem * var(--login-scale)), 100%);
    width: fit-content;
    max-width: min(100%, var(--container-safe-inline));
    padding: 0 calc(var(--button-padding-inline) * var(--login-scale))
      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: var(--shadow-browser-autofill-clear) !important;
    box-shadow: var(--shadow-browser-autofill-clear) !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: var(--layout-autofill-transition);
  }

  .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: var(--layout-otp-grid-columns);
    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(--login-type-control-scaled);
    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)) * var(--scale-bubble-inline)
    );
    max-width: var(--container-feedback-local);
    margin: 0;
    color: var(--login-feedback-color);
    font-size: var(--login-type-small-scaled);
    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: var(--button-min-height-prominent);
    padding: calc(var(--button-padding-block) * var(--scale-prominent-control))
      calc(var(--button-padding-inline) * var(--scale-prominent-control));
    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: calc(var(--button-min-height-compact) * var(--login-scale));
    padding: calc(var(--button-padding-block) * var(--login-scale))
      calc(var(--button-padding-inline) * var(--login-scale));
    border-color: var(--login-submit-compact-border);
    color: var(--login-submit-compact-color);
    font-size: var(--login-type-small-scaled);
    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;
  }

  @media (max-width: 63.999rem) {
    .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 {
      height: auto;
      max-height: none;
      min-height: 0;
      transform: none;
    }

    .participant-shell--login:not([data-e2e-step="email"]) .panel-scroll,
    .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 {
      margin-top: 0;
    }
  }

  .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: var(--container-join-auth-panel-inline);
    --join-auth-panel-inline: var(--join-auth-control-inline);
    --join-auth-edge-inset-y: var(--layout-join-auth-edge-inset-y);
    --join-auth-edge-inset-block: var(--layout-join-auth-edge-inset-block);
    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(--layout-registration-identity-stack-gap);
    --join-auth-panel-inline: var(--container-join-auth-panel-inline);
    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);
    max-height: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: 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
    > .flow-step-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(.flow-step-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
    > :is(.flow-step-reveal)
    > .registration-identity-section,
  .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 {
    container-type: normal;
    container-name: none;
  }

  .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[data-variant="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[data-variant="registration"] {
    display: contents;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  @media (max-width: 63.999rem) {
    .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);
    }
  }

  @media (max-width: 63.999rem) {
    .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-rows: minmax(0, 1fr) auto;
    }

    .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 {
      align-self: end;
      grid-template-rows: auto;
      align-content: start;
      height: auto;
      min-height: 0;
      max-height: none;
      container-type: normal;
      container-name: none;
      background: var(--split-panel-surface);
      overflow: visible;
    }

    .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
      > .panel-scroll.panel-scroll--join-identity {
      grid-row: 1;
      align-self: stretch;
      padding-block: var(--registration-identity-stack-gap);
      padding-bottom: max(
        var(--safe-area-bottom),
        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: var(--layout-rules-consent-stack-gap);
    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
    > .flow-step-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 {
    container-type: normal;
    container-name: none;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  @media (max-width: 63.999rem) {
    .participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
        .panel-scroll--join-identity
      )
      .registration-identity-section
      :is(input, textarea):focus {
      scroll-margin-bottom: var(--layout-stack-gap-tight);
    }

    :is(
        .participant-shell.participant-shell--auth-layout.participant-shell--registration,
        .participant-shell--gift-activation-rules
      ):has(.registration-rules-section)
      .rules-consent-input-line
      input:focus {
      scroll-margin-bottom: var(--layout-stack-gap-tight);
    }

    .participant-shell--gift-offer:has(
        .gift-greeting-field:focus,
        .gift-greeting-field:focus-visible
      )
      .panel-scroll {
      scroll-padding-bottom: var(--layout-stack-gap-tight);
    }

    .participant-shell--gift-offer:has(
        .gift-greeting-field:focus,
        .gift-greeting-field:focus-visible
      )
      .gift-greeting-field:focus,
    .participant-shell--gift-offer:has(
        .gift-greeting-field:focus,
        .gift-greeting-field:focus-visible
      )
      .gift-greeting-field:focus-visible {
      scroll-margin-bottom: var(--layout-stack-gap-tight);
    }
  }

  .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(--layout-login-access-caption-panel-gap);
  }

  .participant-shell--auth-layout .join-auth-title {
    justify-self: center;
    width: 100%;
    margin: 0;
    color: var(--text);
    font-size: calc(var(--type-login-control) * var(--scale-login-display));
    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: var(--container-join-auth-panel-inline);
    --join-auth-otp-block: var(--layout-join-auth-otp-block);
    --join-auth-otp-end: calc(
      var(--layout-join-auth-otp-anchor) + var(--join-auth-otp-block) / var(--scale-double)
    );
    --join-auth-back-mid: calc(
      (var(--join-auth-otp-end) + var(--layout-join-auth-back-anchor)) / var(--scale-double)
    );
  }

  .participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
      .registration-otp-section.otp-only-section
    )
    .registration-otp-section.otp-only-section {
    container-type: normal;
    container-name: none;
  }

  @media (max-width: 63.999rem) {
    .participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
        .registration-otp-section.otp-only-section
      )
      > .form-panel
      > .panel-scroll
      > :is(.registration-otp-section, .flow-step-reveal) {
      position: static;
      top: auto;
      left: auto;
      width: 100%;
      max-width: 100%;
      transform: none;
    }
  }

  @media (min-width: 64rem) {
    .participant-shell.participant-shell--auth-layout.participant-shell--registration:has(
        .registration-otp-section.otp-only-section
      )
      > .form-panel
      > .panel-scroll
      > :is(.registration-otp-section, .flow-step-reveal) {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--join-auth-panel-inline);
      max-width: var(--container-offer-scroll-safe-inline);
      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
    > .flow-step-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: var(--layout-otp-grid-columns);
    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)) * var(--scale-bubble-inline)
    );
    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: var(--button-min-height-prominent);
    padding: calc(var(--button-padding-block) * var(--scale-prominent-control))
      calc(var(--button-padding-inline) * var(--scale-prominent-control));
    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: var(--button-min-height-compact);
    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"])
    > form
    > 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"])
    .registration-name-fields,
  .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,
      var(--container-join-auth-field-inline)
    );
    min-width: 0;
  }

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

  .participant-shell.participant-shell--auth-layout.participant-shell--registration
    > .panel-footer[data-variant="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[data-stage-copy-align="center"] {
    top: var(--offer-floating-caption-offset, calc(var(--fluid-block) * var(--scale-gift-zone)));
    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;
  }


  /* ==========================================================================
   Choice panel
   ========================================================================== */

  .choice-panel {
    --choice-panel-gap: var(--layout-choice-panel-gap);
    --choice-heading-inline: var(--container-choice-heading-inline);
    --choice-options-inline: var(--container-choice-options);
    --choice-options-gap: var(--layout-choice-options-gap);
    --choice-card-min-height: calc(
      var(--choice-card-min-height-base) * var(--choice-content-scale, 1)
    );
    --choice-card-padding-block: calc(
      var(--layout-choice-card-padding-block) * var(--choice-content-scale, 1)
    );
    --choice-card-padding-inline: calc(
      var(--layout-choice-card-padding-inline) * var(--choice-content-scale, 1)
    );
    --choice-card-gap: calc(var(--layout-choice-card-gap) * var(--choice-content-scale, 1));
    --choice-focus-outline-color: rgba(255, 255, 255, 0.84);
    container-type: 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: calc(var(--type-title-large) * var(--choice-content-scale, 1));
    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: calc(var(--choice-options-gap) * var(--choice-content-scale, 1));
  }

  .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: var(--container-query-wide-below)) {
    .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: calc(var(--choice-title-narrow-fluid-size) * var(--choice-content-scale, 1));
    }

    .participant-shell--join-choice .choice-subtitle {
      font-size: calc(var(--choice-subtitle-narrow-size) * var(--choice-content-scale, 1));
    }

    .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: var(--layout-offer-details-margin-top);
    }

    .offer-form {
      gap: 0;
      --offer-actions-margin-top: var(--layout-offer-actions-margin-top);
    }

    .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-main-gap);
      width: 100%;
      padding-block: var(--layout-offer-gift-panel-padding-block);
    }

    .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: var(--layout-offer-gift-panel-scroll-padding-top);
    }

    .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 {
    --choice-content-scale: 1.15;

    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    overflow: hidden;
  }

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

  .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: 100svh;
    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%;
    max-height: calc(
      100svh -
        max(var(--safe-area-top), var(--space-4)) - max(var(--safe-area-bottom), var(--space-4))
    );
    display: grid;
    place-items: center;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    pointer-events: none;
  }

  .participant-shell--join-choice .panel-scroll::-webkit-scrollbar {
    display: 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;
    --choice-options-inline: min(
      31rem,
      calc(100vw - var(--panel-safe-gutter-start) - var(--panel-safe-gutter-end))
    );
    container-type: normal;
    container-name: none;
    gap: var(--choice-panel-gap);
    width: var(--choice-options-inline);
  }

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

  .participant-shell--join-choice .choice-options {
    --choice-options-gap: var(--layout-choice-options-gap-narrow);
    grid-template-columns: 1fr;
    justify-items: center;
    margin-inline: auto;
    width: 100%;
  }

  .participant-shell--join-choice .choice-card {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .participant-shell--join-choice .choice-title,
  .participant-shell--join-choice .choice-subtitle {
    width: 100%;
  }

  .participant-shell--join-choice .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;
  }

  .choice-title {
    font-weight: 600;
    font-size: calc(var(--choice-title-fluid-size) * var(--choice-content-scale, 1));
    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: calc(var(--type-caption) * var(--choice-content-scale, 1));
    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: var(--container-query-wide)) {
    .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: calc(
        var(--choice-card-min-height-wide) * var(--choice-content-scale, 1)
      );
      --choice-card-padding-inline: calc(
        var(--layout-choice-card-padding-inline-wide) * var(--choice-content-scale, 1)
      );
      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: calc(var(--choice-title-wide-fluid-size) * var(--choice-content-scale, 1));
    }

    .choice-subtitle {
      font-size: calc(var(--type-small) * var(--choice-content-scale, 1));
    }
  }

  @container adaptive-surface (min-width: 1024px) {
    .participant-shell--join-choice .choice-panel {
      --choice-panel-gap: var(--layout-choice-panel-gap-wide);
      --choice-options-inline: min(
        var(--container-choice-options-wide),
        calc(100vw - var(--panel-safe-gutter-start) - var(--panel-safe-gutter-end))
      );
    }

    .participant-shell--join-choice .choice-options {
      --choice-options-gap: var(--layout-choice-options-gap-wide);
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .participant-shell--join-choice .choice-options .choice-card + .choice-card::before {
      content: none;
      display: none;
    }

    .participant-shell--join-choice .choice-card {
      min-height: calc(var(--choice-card-min-height-wide) * var(--choice-content-scale, 1));
      padding-inline: calc(
        var(--layout-choice-card-padding-inline-wide) * var(--choice-content-scale, 1)
      );
    }

    .participant-shell--join-choice .choice-title {
      font-size: calc(var(--choice-title-wide-fluid-size) * var(--choice-content-scale, 1));
    }

    .participant-shell--join-choice .choice-subtitle {
      font-size: calc(var(--type-small) * var(--choice-content-scale, 1));
      white-space: normal;
    }
  }

  @container adaptive-surface (min-width: 1024px) and (max-width: 89.999rem) {
    .participant-shell--join-choice .choice-panel {
      --choice-options-inline: min(
        68rem,
        calc(100vw - var(--panel-safe-gutter-start) - var(--panel-safe-gutter-end))
      );
    }

    .participant-shell--join-choice .choice-options {
      --choice-options-gap: clamp(0.85rem, 1.5vw, 1.35rem);
    }

    .participant-shell--join-choice .choice-card {
      padding-inline: clamp(0.3rem, 0.9vw, 0.72rem);
    }

    .participant-shell--join-choice .choice-title {
      font-size: clamp(2rem, 2.85vw, 2.35rem);
      line-height: var(--leading-display-snug);
    }

    .participant-shell--join-choice .choice-subtitle {
      font-size: clamp(1rem, 1.42vw, 1.12rem);
      line-height: var(--leading-control);
      white-space: nowrap;
    }
  }

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

  @media (max-width: 30rem), (max-height: 34rem) {
    .choice-subtitle,
    .participant-shell--offer .solo-offer-top-copy span,
    .participant-shell--offer .gift-recipient-notice-line {
      white-space: normal;
      overflow-wrap: anywhere;
      text-wrap: balance;
    }

    .participant-shell--login .login-copy:has(.login-missing-actions) .stage-phrase-title {
      white-space: normal;
      overflow-wrap: anywhere;
      text-wrap: balance;
    }
  }


  /* 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: var(--layout-gift-template-rail-reserve);
    --offer-base-gap: var(--layout-base-gap);
    --offer-viewport-edge-inset: var(--layout-offer-viewport-edge-inset);
    --offer-visible-height: 100svh;
    --offer-edge-gap: var(--offer-viewport-edge-inset);
    --solo-offer-control-height: max(
      var(--interactive-min-size),
      clamp(2.05rem, calc(var(--fluid-inline) * var(--scale-offer-control-tall)), 2.45rem)
    );
    --solo-offer-text-size: var(--type-solo-offer-copy-compact);
    --gift-offer-panel-height: calc(
      var(--solo-offer-control-height) * var(--scale-double) + var(--divider-width-double)
    );
    --gift-certificate-caption-size: var(--type-gift-certificate-caption-base);
    --offer-copy-inline: var(--container-readable-stage);
    --offer-copy-inline-gift: var(--container-readable-stage);
    --offer-gift-message-inline: var(--container-offer-message);
    --offer-control-inline: var(--container-offer-control-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) * var(--scale-offer-block-tall)),
      calc(var(--offer-visible-height) - var(--offer-bottom-reserve) - var(--layout-offer-floating-reserve-block))
    );
    --offer-faq-max-block: min(
      calc(var(--fluid-block) * var(--scale-offer-block-max)),
      calc(var(--offer-visible-height) - var(--layout-offer-floating-reserve-block))
    );
    --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) * var(--scale-offer-headline));
    --group-offer-top-copy-lift: calc(
      var(--offer-base-gap) * var(--scale-group-offer-top-copy-lift)
    );
    --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) * var(--scale-double) + 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: 100svh;
    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,
  .participant-shell--renewal .split-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
  }

  .participant-shell--renewal
    .split-stage
    .stage-media-shell:not([data-ready="true"]):not([data-route-handoff="true"])
    ~ .focus-backdrop[data-focus-backdrop-variant="join-stage"]
    .focus-backdrop__scrim {
    opacity: 0;
    transition-delay: 0ms;
  }

  :is(.participant-shell--solo-offer, .participant-shell--gift-offer):not(
      :has(.stage-overlay[data-stage-overlay-mode="faq"])
    )
    .focus-backdrop[data-focus-backdrop-variant="join-stage"]
    .focus-backdrop__scrim {
    opacity: 0;
    transition-delay: 0ms;
  }

  .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
      .participant-shell--join-gift,
      .participant-shell--gift-activation
    ):has(.panel-scroll--join-identity)
    .focus-backdrop[data-focus-backdrop-variant="join-stage"]
    .focus-backdrop__scrim {
    opacity: 0;
    transition-delay: 0ms;
  }

  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="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[data-stage-overlay-mode="faq"]))
    .stage-overlay
    > * {
    z-index: 1;
  }

  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay
    > .solo-offer-top-copy:not([data-stage-copy-align="center"]),
  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay
    > .group-offer-top-copy,
  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="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[data-stage-overlay-mode="faq"]))
    .stage-overlay
    > .solo-offer-top-copy:not([data-stage-copy-align="center"]) {
    font-size: var(--type-solo-offer-top-copy);
  }

  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay:has(> .solo-offer-top-copy:not([data-stage-copy-align="center"])),
  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay:has(> .group-offer-top-copy),
  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="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: var(--shadow-stage-copy-firm);
    transform: translateY(var(--group-offer-top-copy-lift));
    pointer-events: none;
  }

  .participant-shell--group-offer.participant-shell--offer:not(
      :has(.stage-overlay[data-stage-overlay-mode="faq"])
    )
    .stage-overlay
    > .group-offer-top-copy {
    font-size: var(--group-offer-top-copy-size);
  }

  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay
    > .stage-static-center,
  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay
    > .solo-offer-top-copy[data-stage-copy-align="center"],
  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay[data-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[data-stage-overlay-mode="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[data-stage-overlay-mode="faq"]))
    .stage-overlay:has(> .solo-offer-top-copy:not([data-stage-copy-align="center"]))
    > .stage-static-center {
    grid-row: 4;
    align-self: center;
  }

  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
    .stage-overlay:has(> .group-offer-top-copy)
    > .flow-step-reveal {
    display: contents;
  }

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

  .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="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[data-stage-overlay-mode="faq"])
    )
    .stage-overlay[data-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: 100svh;
    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--offer .form-section.offer-section {
    container-type: normal;
    container-name: none;
  }

  .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: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: min(var(--container-readiness-panel), 100%);
    margin-inline: auto;
    max-height: calc(
      100svh -
        max(var(--safe-area-top), var(--space-4)) - max(var(--safe-area-bottom), var(--space-4))
    );
    display: flex;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    transform: none;
    pointer-events: auto;
  }

  @media (min-width: 64rem) {
    .participant-shell--group-readiness .panel-scroll {
      position: fixed;
      top: 50%;
      left: 50%;
      bottom: auto;
      width: var(--container-readiness-panel);
      max-width: var(--container-readiness-panel);
      transform: translate(-50%, -50%);
    }
  }

  .participant-shell--group-readiness .panel-scroll::-webkit-scrollbar {
    display: none;
  }

  .participant-shell--group-readiness .group-readiness-actions button {
    background: transparent;
    color: var(--text-soft);
  }

  .participant-shell--group-readiness .group-readiness-actions button:hover,
  .participant-shell--group-readiness
    .group-readiness-actions
    button[data-tone="secondary"]:hover {
    color: var(--text);
    opacity: 1;
  }

  .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);
    max-height: calc(
      var(--offer-visible-height) - var(--offer-viewport-edge-inset) - var(--safe-area-top) -
        var(--safe-area-bottom)
    );
    display: block;
    flex: none;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    transform: none;
    pointer-events: auto;
  }

  .participant-shell--solo-offer .panel-scroll::-webkit-scrollbar,
  .participant-shell--group-offer .panel-scroll::-webkit-scrollbar,
  .participant-shell--gift-offer .panel-scroll::-webkit-scrollbar {
    display: none;
  }

  .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, var(--layout-gift-template-rail-reserve)))
    );
    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: var(--scale-offer-panel-pad);
    --gift-greeting-frame-extra: var(--divider-width-double);
    --gift-greeting-shell-inline: var(--layout-gift-greeting-shell-inline);
    --gift-greeting-text-scale: var(--scale-composer-inline-wide);
    container-type: 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)),
        calc(var(--scale-gift-greeting-cap-cqi) * var(--cqi-unit))
      ),
      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(
            var(--scale-gift-greeting-fit-cqi) * var(--cqi-unit) * 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: var(--layout-gift-certificate-caption-gap);
    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, var(--container-offer-message));
    display: grid;
    justify-items: center;
    gap: var(--layout-gift-certificate-message-gap);
    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[data-variant="side"] {
    --gift-template-hit-size: max(
      var(--interactive-min-size-fine),
      calc(var(--control-gift-template-hit-size) * var(--scale-hit))
    );
    --gift-template-selector-gap: calc(
      var(--layout-gift-template-selector-gap) * var(--scale-tight)
    );
    --gift-template-side-dot-gap: calc(
      var(--layout-gift-template-side-dot-gap) * var(--scale-side)
    );
    position: absolute;
    top: 50%;
    right: max(
      var(--safe-area-right),
      clamp(0.4rem, calc(var(--fluid-inline) * var(--scale-offer-button-inline)), 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: var(--shadow-gift-template-note);
  }

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

  .gift-template-selector[data-variant="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: var(--shadow-gift-template-arrow);
  }

  .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: none;
  }

  .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: var(--radius-circle);
    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: var(--radius-circle);
    background: transparent;
    box-shadow: var(--shadow-gift-template-dot);
  }

  .gift-template-dot[data-active="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: var(--shadow-control-focus-soft);
  }

  .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) * var(--scale-button-block));
    --button-padding-inline: calc(var(--offer-base-gap) * var(--scale-offer-button-inline));
    --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) * var(--scale-button-block));
    --button-padding-inline: calc(var(--offer-base-gap) * var(--scale-offer-button-inline));
    --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: var(--offer-control-font-weight-strong);
  }

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

  :is(
      .participant-shell--solo-offer,
      .participant-shell--group-offer,
      .participant-shell--gift-offer
    )
    .offer-pay-button
    .offer-pay-shimmer {
    --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);

    display: inline-flex;
    align-items: center;
    font-weight: var(--offer-control-font-weight-accent);
    line-height: inherit;
  }

  :is(
      .participant-shell--solo-offer,
      .participant-shell--group-offer,
      .participant-shell--gift-offer
    )
    .offer-pay-button
    :is(.offer-pay-action, .offer-pay-price) {
    font-weight: inherit;
    font-variation-settings: "wght" var(--offer-control-font-weight-accent);
  }

  :is(
      .participant-shell--solo-offer,
      .participant-shell--group-offer,
      .participant-shell--gift-offer
    )
    .offer-pay-button
    .offer-pay-action {
    font-weight: 1000;
    font-variation-settings: "wght" 1000;
  }

  .offer-pay-label,
  .offer-pay-shimmer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ornament-gap-lg);
    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([data-active="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([data-active="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([data-active="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: var(--shadow-control-selected-ring);
  }

  .participant-shell--offer .offer-control-panel__option[data-active="true"],
  .participant-shell--offer .offer-control-panel__option[data-active="true"]:hover,
  .participant-shell--offer .offer-control-panel__option[data-active="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) * var(--scale-gift-zone)));
    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[data-stage-copy-align="center"] {
    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: var(--shadow-stage-copy-strong);
  }

  .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) * var(--scale-fluid-block-52)),
      calc(var(--offer-visible-height) - var(--space-6) * var(--scale-offer-viewport-reserve))
    );
    --group-offer-copy-size: var(--group-offer-copy-size-base);
    --group-offer-heading-size: var(--group-offer-heading-size-base);
    --group-offer-copy-leading: var(--line-height-group-offer-copy);
    --group-offer-section-gap: calc(var(--offer-base-gap) * var(--scale-double));

    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: var(--shadow-stage-copy-soft);
  }

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

  .stage-overlay[data-stage-overlay-mode="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[data-stage-overlay-mode="faq"])
    .stage-overlay[data-stage-overlay-mode="faq"],
  .participant-shell--offer:has(.stage-overlay[data-stage-overlay-mode="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[data-stage-overlay-mode="faq"])
    .stage-overlay[data-stage-overlay-mode="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[data-stage-overlay-mode="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[data-stage-overlay-mode="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[data-stage-overlay-mode="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: var(--container-group-offer-copy);
    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([data-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([data-offer-copy="faq"]) {
    text-align: left;
  }

  .group-offer-copy:not([data-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[data-active="true"] {
    background: var(--offer-control-panel-selected-bg);
    color: rgba(0, 0, 0, 0.86);
    font-weight: var(--offer-control-font-weight-strong);
  }

  .participant-shell--solo-offer .offer-control-panel .offer-switch-tab[data-active="true"]:hover,
  .participant-shell--group-offer .offer-control-panel .offer-switch-tab[data-active="true"]:hover,
  .participant-shell--gift-offer .offer-control-panel .offer-switch-tab[data-active="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) * var(--scale-soft));
    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) * var(--scale-double)) / 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)[data-active="true"]) {
    --segment-index: 0;
  }

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

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

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

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

  .segments:has(.segment:nth-of-type(6) input:checked),
  .segments:has(.segment:nth-of-type(6)[data-active="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: var(--shadow-segment-focus);
    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(var(--app-press-scale-soft));
  }

  .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[data-course-tab="format"]:hover {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    transform: none;
  }

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

  @container adaptive-surface (max-width: var(--container-query-compact)) {
    .legacy-course-course-segments .legacy-course-course-tab {
      padding-block: var(--legacy-course-tab-padding-block-compact);
      padding-inline: var(--legacy-course-tab-padding-inline-compact);
    }
  }

  .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: var(--ornament-offset-xs);
    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;
  }

  @container adaptive-surface (max-width: var(--container-query-readable-compact)) {
    .rules-copy h2 {
      font-size: var(--accordion-title-size-compact);
    }
  }

  .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: var(--container-rules-input-inline);
    --rules-input-min-inline: var(--container-rules-input-min-inline);
    --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);
    container-type: size;
    container-name: adaptive-surface;
    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);
    border-radius: var(--radius-pill);
    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);
  }

  @container adaptive-surface (max-width: var(--container-query-offer-inline)) {
    .rules-consent-section .rules-payment-controls {
      width: 100%;
    }

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


  :is(
    .participant-shell--join-solo,
    .participant-shell--join-group,
    .participant-shell--join-gift
  ) {
    container-type: size;
    container-name: adaptive-surface;
  }

  .payment-inline-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-sticky);
    container-type: size;
    container-name: adaptive-surface;
    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[data-mode="actions"] {
    align-content: center;
  }

  @container adaptive-surface (min-width: var(--container-query-wide)) {
    .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%;
    }
  }

  @container adaptive-surface (max-width: var(--container-query-wide)) {
    .participant-shell--join-solo .payment-inline-overlay[data-mode="actions"],
    .participant-shell--join-group .payment-inline-overlay[data-mode="actions"],
    .participant-shell--join-gift .payment-inline-overlay[data-mode="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;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    background: var(--surface-canvas);
    color: var(--text);
    overflow: hidden;
  }

  html:has([data-life-payment-provider-overlay]),
  html:has([data-life-payment-provider-overlay]) body {
    overflow: hidden;
  }

  .payment-provider-waiting {
    position: relative;
    z-index: 3;
    grid-area: 1 / 1;
    container-type: size;
    container-name: adaptive-surface;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-block: max(var(--safe-area-top), var(--shell-gutter))
      max(var(--safe-area-bottom), var(--shell-gutter));
    padding-inline: max(var(--safe-area-left), var(--shell-gutter))
      max(var(--safe-area-right), var(--shell-gutter));
    background: var(--page);
    color: #fff;
    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: 100%;
    min-height: 0;
    max-height: 100%;
    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;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !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: 100svh;
    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: 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: 100svh;
    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;
  }


  /* Stage dimming lives in .focus-backdrop__scrim via --focus-backdrop-scrim. */


}