@layer components {
  .ec-loading {
    --section-py: var(--ec-section-py-sm);

    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
  }

  .ec-loading__stack {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--ec-section-gap);
  }

  .ec-loading__gauge {
    display: flex;
    inline-size: 100%;
    max-inline-size: 540px;
    flex-direction: column;
    align-items: center;
    gap: var(--ec-space-16);
  }

  .ec-loading__ring {
    display: block;
    flex: 0 0 auto;
    animation: ec-loading-spin 1.1s linear infinite;
  }

  .ec-loading__ring svg {
    display: block;
  }

  @keyframes ec-loading-spin {
    to {
      rotate: 1turn;
    }
  }

  .ec-loading__text {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    gap: var(--ec-space-12);
    text-align: center;
  }

  .ec-loading__title {
    color: var(--ec-text-primary);
    font-size: var(--ec-size-card-title-lg);
    font-weight: var(--ec-weight-extrabold);
    line-height: var(--ec-leading-title-lg);
  }

  .ec-loading__step {
    color: var(--ec-text-accent);
    font-size: var(--ec-size-md);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-relaxed);
  }

  .ec-loading__bar {
    inline-size: 100%;
    block-size: 8px;
    border: 1px solid var(--ec-grey-white);
    border-radius: 2px;
    background: var(--ec-bg-light);
    overflow: clip;
  }

  .ec-loading__fill {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 2px;
    background: var(--ec-bg-accent);
    transform: scaleX(calc(var(--ec-loading-progress, 0) / 100));
    transform-origin: left center;
    transition: transform 0.4s linear;
  }

  .ec-loading__cards {
    display: flex;
    inline-size: 100%;
    flex-wrap: wrap;
    gap: var(--ec-space-16);
  }

  .ec-loading__card {
    display: flex;
    flex: 1 1 343px;
    min-inline-size: min(343px, 100%);
    flex-direction: column;
    padding: var(--ec-space-24);
    border-radius: var(--ec-radius-xl);
  }

  .ec-loading__offers {
    display: grid;
    flex: 1 1 343px;
    min-inline-size: min(343px, 100%);
  }

  .ec-loading__offers > .ec-loading__card {
    grid-area: 1 / 1;
  }

  .ec-loading__offers:only-child {
    flex: 0 1 430px;
    margin-inline: auto;
  }

  .ec-loading__offers > [inert] {
    visibility: hidden;
  }

  .ec-loading__card--email {
    gap: var(--ec-space-16);
    background: var(--ec-bg-mid);
    color: var(--ec-text-inverse);
  }

  .ec-loading__card--offer {
    gap: var(--ec-space-8);
    background: var(--ec-bg-light);
  }

  .ec-loading__card-text {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-4);
  }

  .ec-loading__card-title {
    font-size: var(--ec-size-card-title);
    font-weight: var(--ec-weight-extrabold);
    line-height: var(--ec-leading-title);
  }

  .ec-loading__card--offer .ec-loading__card-title {
    color: var(--ec-text-primary);
  }

  .ec-loading__card-lede {
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-loading__card--offer .ec-loading__card-lede {
    color: var(--ec-text-secondary);
  }

  .ec-loading__kicker {
    color: var(--ec-text-accent);
    font-size: var(--ec-size-xs);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-default);
  }

  .ec-loading__price {
    color: var(--ec-text-accent);
    font-size: var(--ec-size-card-title);
    font-weight: var(--ec-weight-extrabold);
    line-height: var(--ec-leading-title);
  }

  .ec-loading__card--award {
    align-items: center;
    justify-content: center;
    gap: var(--ec-space-16);
    background: var(--ec-bg-mid);
    color: var(--ec-text-inverse);
    text-align: center;
  }

  .ec-loading__card--award .ec-loading__kicker {
    letter-spacing: var(--ec-tracking-label);
    text-transform: uppercase;
  }

  .ec-loading__award {
    display: block;
    inline-size: min(100%, 220px);
    block-size: auto;
  }

  .ec-loading__award-caption {
    opacity: 0.75;
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-loading__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ec-loading__field .ec-input {
    inline-size: 100%;
  }

  .ec-loading__submit {
    align-self: center;
  }

  .ec-loading__card--advice {
    justify-content: center;
    text-align: center;
  }

  .ec-loading__card--sent {
    --sent-rule: rgb(255 255 255 / 45%);
    --sent-seal-bg: var(--ec-bg-white);
    --sent-seal-fg: var(--ec-text-accent);

    justify-content: center;
    gap: var(--ec-space-24);
    padding: var(--ec-space-32);
    text-align: center;
  }

  .ec-loading__sent-head {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-8);
  }

  .ec-loading__seal {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
    margin-block-end: var(--ec-space-8);
    border-radius: 50%;
    background: var(--sent-seal-bg);
    color: var(--sent-seal-fg);
  }

  .ec-loading__sent-title {
    display: flex;
    align-items: center;
    gap: var(--ec-space-20);
    font-size: 1.5rem;
    font-weight: var(--ec-weight-extrabold);
    line-height: 1.25;
  }

  .ec-loading__sent-title::before,
  .ec-loading__sent-title::after {
    flex: 1 1 0;
    block-size: 1px;
    background: var(--sent-rule);
    content: "";
  }

  .ec-loading__card--sent .ec-loading__card-lede {
    font-size: var(--ec-size-md);
    line-height: 1.4;
  }

  .ec-loading__sent-to {
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-loading__sent-to strong {
    font-weight: var(--ec-weight-bold);
    text-decoration: underline;
  }

  .ec-advice-offer {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-16);
    align-items: center;
  }

  .ec-advice-offer__image,
  .ec-advice-offer__icon {
    display: none;
  }

  .ec-advice-offer__body,
  .ec-advice-offer__text {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-12);
  }

  .ec-advice-offer__title {
    font-size: var(--ec-size-md);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-relaxed);
  }

  .ec-advice-offer__lede {
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-advice-offer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-16);
    align-items: center;
    justify-content: center;
  }

  .ec-advice-offer__dismiss {
    padding: 0;
    border-width: 0 0 2px;
    background: none;
    color: var(--ec-text-accent);
    font-family: inherit;
    cursor: pointer;
  }

  .ec-advice-offer__dismiss::after {
    content: none;
  }

  .ec-loading__card--email .ec-advice-offer__dismiss {
    color: inherit;
  }

  .ec-loading__status:empty {
    display: none;
  }

  .ec-loading__status {
    opacity: 0.75;
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-loading__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--ec-space-12);
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
    cursor: pointer;
  }

  .ec-loading__consent input {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
    margin: 0;
    margin-block-start: 0.2lh;
    border: 1px solid var(--ec-grey-white);
    border-radius: var(--ec-radius-sm);
    cursor: pointer;
  }

  .ec-loading__consent input:checked {
    background: var(--ec-grey-white);
  }

  .ec-loading__consent input:checked::after {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 4px;
    inline-size: 4px;
    block-size: 8px;
    border: solid var(--ec-orange-primary);
    border-width: 0 2px 2px 0;
    rotate: 45deg;
  }

  .ec-loading__notice {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-4);
  }

  @media (width < 60rem) {
    .ec-loading__title {
      font-size: var(--ec-size-lg);
    }
  }
}