.sw26-papertrail-registration {
  display: flex;
  padding: 64px 48px 80px 48px;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  flex: 1 0 0;
  background: #0b1120;

  .container {
    display: flex;
    max-width: 1232px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .value-prop {
    display: flex;
    max-width: 615px;
    padding-top: 32px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    flex: 1 1 0;
  }

  .value-prop-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 64px;
    flex: 1 0 0;
  }

  .value-prop-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .headlines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }

  .top-headline,
  .top-headline p,
  .top-headline h1,
  .top-headline h2,
  .top-headline h3,
  .top-headline h4,
  .top-headline h5,
  .top-headline h6 {
    color: #ff6200;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0;
  }

  .headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: 56px;
    font-style: normal;
    font-weight: 900;
    line-height: 66px;
    letter-spacing: 0;
  }

  .headline .first-text,
  .headline .second-text {
    display: block;
    background-color: transparent;
    background-image: linear-gradient(
      90deg,
      var(--gradient-start, #ffffff),
      var(--gradient-end, #ffffff)
    );
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .headline .first-text {
    --gradient-start: #ffffff;
    --gradient-end: #ffffff;
  }

  .headline .second-text {
    --gradient-start: #60a5fa;
    --gradient-end: #818cf8;
  }

  .description {
    color: #94a3b8;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    line-height: 32px;
    letter-spacing: 0;
    padding-top: 8px;
  }

  .description p,
  .description li {
    margin: 0;
    color: #cbd5e1;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;
  }

  .description strong,
  .description b {
    color: #cbd5e1;
    font-weight: 700;
  }

  .value-prop-bullets {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .bullet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .bullet-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 6px;
    border-radius: 50%;
    background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 0 0 4px #34d39933;
  }

  .value-prop-bullets .bullet p,
  .review-author-name,
  .review-author-title,
  .review-text-content,
  .value-prop-text,
  .value-prop-text p {
    margin: 0;
    color: #cbd5e1;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
  }

  .value-prop-text {
    color: #90a1b9;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
  }

  .value-prop-text p {
    color: #90a1b9;
    font-weight: 400;
  }

  .value-prop-text a {
    color: #60a5fa;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  .value-prop-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 64px;
    flex: 1 0 0;
    align-self: stretch;
  }
  .value-prop-line {
    width: 100%;
    height: 1px;
    align-self: stretch;
    background: linear-gradient(
      90deg,
      #2b7fff00 0%,
      #2b7fff80 50%,
      #2b7fff00 100%
    );
    box-shadow: 0 0 15px 0 #3b82f680;
  }

  .value-prop-review {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 64px;
    flex: 1 0 0;
  }

  .review-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
  }

  .review-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .review-text-content {
    color: #cbd5e1;
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0;
  }

  .review-author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    align-self: stretch;
    padding-right: 10px;
  }

  .review-author-name {
    color: #cbd5e1;
    text-align: left;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
  }

  .review-author-title {
    color: #94a3b8;
    text-align: left;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
  }

  .form {
    display: flex;
    width: 504px;
    flex-direction: column;
    align-items: flex-start;
    gap: 64px;
    flex-shrink: 0;
    background: #f8fafc;
    box-shadow: 0 20px 40px 0 #00000033;
    height: 100%;
  }

  .form-content {
    display: flex;
    width: 100%;
    padding: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border: 1px solid #ffffff1a;
    background: #ffffff;
    color: #0f172a;
  }

  .form-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-self: stretch;

    > :is(p, h1, h2, h3, h4, h5, h6):not(.subtitle) {
      margin: 0;
      color: #030213;
      text-align: center;
      font-family: "Roboto", sans-serif;
      font-size: 34px;
      font-style: normal;
      font-weight: 700;
      line-height: 44px;
      letter-spacing: 0;
    }
  }

  .form-card-header .subtitle {
    margin: 0;
    text-align: center;
    font-family: "Roboto", sans-serif;
    color: #444;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
  }

  .form-card-header .subtitle p {
    line-height: 24px;
  }

  .form-card-header .subtitle a {
    color: #006482;
    text-decoration: underline;
    font-weight: 400;
  }

  .form-card-header p {
    margin: 0;
  }

  .base-reg-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  .form-fields {
    gap: 12px;
    display: flex;
    flex-direction: column;
  }

  .sw19s-corp-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 0 0 auto;
    align-self: stretch;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
  }

  .base-reg-form {
    .name-row {
      display: flex;
      gap: 16px;
      width: 100%;
    }

    .name-row .sw19s-corp-field {
      flex: 1 1 0;
      min-width: 0;
    }

    .sw19s-corp-field {
      position: relative;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .validation-spinner {
      position: absolute;
      right: 14px;
      top: 40px;
      width: 35px;
      height: 35px;
      transform: translateY(-50%);
      display: none;
    }

    .validation-spinner svg {
      width: 35px;
      height: 35px;
    }

    .sw19s-corp-field.loading .validation-spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      animation: sw26-registration-spinner-rotate 1s linear infinite;
    }

    .sw19s-corp-field label.raised {
      color: #030213;
      display: block;
      visibility: visible;
    }

    .sw19s-corp-field label.raised span {
      color: #e20a38;
    }

    .sw19s-corp-field input[type],
    .sw19s-corp-field select,
    .sw19s-corp-field textarea {
      width: 100%;
      height: 40px;
      padding: 4px 8px;
      justify-content: space-between;
      align-items: center;
      align-content: stretch;
      border-radius: 8px;
      border: 1px solid #94a3b8;
      background: #fff;
      color: #444;
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0;
    }

    .sw19s-corp-field select {
      color: #444;
      appearance: none;
      -webkit-appearance: none;
    }

    .sw19s-corp-field select[name="country"],
    .sw19s-corp-field select[name="mergedCloudProviderDataCenter"] {
      padding-right: 36px;
    }

    .sw19s-corp-field input[type]:focus,
    .sw19s-corp-field select:focus,
    .sw19s-corp-field textarea:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px #2563eb1f;
      outline: 1px solid #60a5fa;
      outline-offset: 2px;
    }

    .sw19s-corp-field input::placeholder,
    .sw19s-corp-field textarea::placeholder {
      color: #a1a1a1;
    }

    .sw19s-corp-field .dropdown-icon,
    .sw19s-corp-field .x-icon,
    .validation-spinner {
      pointer-events: none;
    }

    .sw19s-corp-field .dropdown-icon {
      width: 12px;
      position: absolute;
      right: 14px;
      top: 40px;
      transform: translateY(-50%);
    }

    .sw19s-corp-field.invalid .dropdown-icon {
      display: none;
    }

    .sw19s-corp-field .dropdown-icon svg,
    .sw19s-corp-field .x-icon svg {
      width: 12px;
      height: 12px;
    }

    .sw19s-corp-field .x-icon {
      position: absolute;
      right: 14px;
      top: 40px;
      transform: translateY(-50%);
      fill: #c6022c;
    }

    .sw19s-corp-field:not(.invalid) .x-icon {
      display: none;
    }

    .sw19s-corp-field label.validation {
      display: block;
      margin: 0;
      padding: 0;
      text-align: left;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      letter-spacing: 0;
      color: #c6022c;
    }

    .sw19s-corp-field:not(.invalid) label.validation {
      display: none;
    }

    .ssa + label.validation {
      display: block;
      margin: 0;
      padding: 0;
      text-align: left;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      letter-spacing: 0;
      color: #c6022c;
    }

    .ssa:not(.invalid) + label.validation {
      display: none;
    }

    .opt-in,
    .ssa {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      color: #334155;
      font-size: 14px;
      line-height: 22px;
    }

    .opt-in[data-country-exclude]:not(.country-matches) {
      display: none;
    }

    .opt-in input,
    .ssa input {
      position: absolute;
      width: 18px;
      height: 18px;
      margin: 3px 0 0;
      opacity: 0;
      cursor: pointer;
    }

    .opt-in > .ssa-checkmark,
    .ssa .ssa-checkmark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border: 1.5px solid #94a3b8;
      border-radius: 3px;
      color: #ffffff;
      background: #ffffff;
    }

    .ssa.invalid .ssa-checkmark {
      border-color: #c6022c;
    }

    .opt-in > .ssa-checkmark svg,
    .ssa .ssa-checkmark svg {
      width: 24px;
      height: 24px;
      opacity: 0;
    }

    .opt-in input:checked + .ssa-checkmark,
    .ssa input:checked + .ssa-checkmark {
      background: #fff;
    }

    .opt-in input:checked + .ssa-checkmark svg,
    .ssa input:checked + .ssa-checkmark svg {
      opacity: 1;
    }

    .opt-in input:focus-visible + .ssa-checkmark,
    .ssa input:focus-visible + .ssa-checkmark {
      outline: 1px solid #60a5fa;
      outline-offset: 2px;
    }

    .ssa p,
    .terms-text p,
    .opt-in > span:not(.ssa-checkmark) {
      color: #444;
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0;
      margin: 0;
    }

    .ssa a {
      color: #006482;
      text-decoration: underline;
      font-weight: 400;
    }

    .terms-text {
      color: #475569;
      font-size: 12px;
      line-height: 18px;
      padding-top: 8px;
    }

    .submit-buttons {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      width: 100%;
      padding-top: 8px;
    }

    .pt-submit-button {
      justify-content: center;
      width: 100%;
      height: 56px;
      font-family: "Roboto", sans-serif;
      font-size: 16px;
      line-height: 24px;
    }

    .pt-submit-button .submit-button-text-mobile {
      display: none;
    }

    .submit-buttons .under-button-text {
      color: #444;
      font-family: "Roboto", sans-serif;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 14px;
      letter-spacing: -0.15px;
    }

    .submit-spinner svg {
      width: 20px;
      height: 20px;
      color: #fff;
    }

    .submit-spinner {
      display: none;
    }

    &.submitting .submit-desktop {
      display: none;
    }

    &.submitting .submit-spinner {
      display: inline-flex;
    }

    &.submitting .submit-spinner svg {
      animation: sw26-registration-submit-spinner-rotate 1s linear infinite;
    }

    .bottom-text {
      color: #666;
      font-family: "Roboto", sans-serif;
      text-align: center;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      padding-top: 24px;
      border-top: 1px solid #90a1b9;
    }

    .bottom-text p {
      margin: 0;
    }

    .bottom-text a {
      color: #006482;
      text-decoration: underline;
      font-weight: 400;
    }
  }

  dialog {
    padding: 0;
    border: 0;

    &::backdrop {
      background: #0f172a8c;
    }

    .wrap {
      max-width: 539px;
      padding: 48px 32px;
      background: #e2e8f0;
      box-shadow: 0 20px 40px #00000033;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 19px;
    }

    .close-btn {
      position: absolute;
      right: 16px;
      top: 16px;
      color: #000;
      border: none;
      background: transparent;

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
      }

      svg {
        width: 18px;
        height: 18px;
        aspect-ratio: 1/1;
        border: none;
      }
    }

    .text-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-self: stretch;
    }

    .title {
      font-family: "Roboto", sans-serif;
      font-size: 24px;
      line-height: 36px;
      letter-spacing: 0;
      font-style: normal;
      font-weight: 700;
      color: #030213;
    }

    .modal-text {
      color: #030213;
      font-family: "Roboto", sans-serif;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px;
      letter-spacing: 0;
      margin: 0;
      text-align: center;
    }

    .ctas-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .modal-btn-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .registration-button {
      width: 100%;
      min-height: 44px;
      border-radius: 10px;
      border: 1px solid #dbe2ea;
      background: #f8fafc;
      color: #0f172a;
      font-size: 18px;
      font-weight: 600;
      line-height: 22px;
      cursor: pointer;
    }

    .registration-button {
      display: flex;
      padding: 16px 30px;
      justify-content: center;
      align-items: center;
      align-self: stretch;
      border-radius: 112px;
      background: #111;
      color: #fff;
      min-width: 200px;
    }

    .customer-modal-cta--link {
      padding: 0;
      border: 0;
      background: transparent;
      color: #000;
      text-align: center;
      font-family: "Roboto", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      text-decoration: none;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }

      &:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
      }
    }

    @media (max-width: 1023px) {
      &::backdrop {
        background: #4a4a4a80;
        background-blend-mode: multiply;
      }
    }
  }

  @media (max-width: 1024px) {
    .base-reg-form {
      .pt-submit-button .submit-button-text-desktop {
        display: none;
      }

      .pt-submit-button .submit-button-text-mobile {
        display: inline;
      }
    }
  }

  @media (min-width: 360px) and (max-width: 1024px) {
    padding: 48px 32px 64px;

    .container {
      flex-direction: column;
      align-items: stretch;
      gap: 64px;
    }

    .value-prop,
    .value-prop-content {
      display: contents;
    }

    .value-prop-top {
      order: 1;
      width: 100%;
    }

    .form {
      order: 2;
      width: 100%;
    }

    .value-prop-bottom {
      order: 3;
      width: 100%;
      flex: 0 1 auto;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .headline {
      font-size: 48px;
      line-height: 58px;
    }

    .value-prop-bullets {
      flex-wrap: wrap;
    }
  }

  @media (min-width: 640px) and (max-width: 767px) {
    padding: 40px 24px 56px;

    .headline {
      font-size: 42px;
      line-height: 50px;
    }

    .description,
    .description p,
    .description li {
      font-size: 17px;
      line-height: 30px;
    }

    .value-prop-bullets {
      flex-wrap: wrap;
    }
  }

  @media (min-width: 360px) and (max-width: 639px) {
    padding: 48px 24px 80px;

    .container {
      gap: 32px;
    }

    .value-prop-top {
      gap: 24px;
    }

    .headline {
      font-size: 34px;
      line-height: 44px;
    }

    .description,
    .description p,
    .description li {
      font-size: 16px;
      line-height: 28px;
    }

    .value-prop-bullets {
      flex-direction: column;
    }

    .base-reg-form {
      .name-row {
        flex-direction: column;
      }

      .name-row .sw19s-corp-field {
        width: 100%;
        flex: 0 0 auto;
        min-width: auto;
      }
    }

    .form-content {
      padding: 32px 24px;
      background: #f8fafc;
    }

    .form-card-header {
      > :is(p, h1, h2, h3, h4, h5, h6):not(.subtitle) {
        font-size: 24px;
        line-height: 36px;
      }
    }
    .form-card-header .subtitle {
      font-size: 16px;
      line-height: 24px;

      & p {
        font-size: 16px;
        line-height: 24px;
      }
    }

    .form-card-header .subtitle p {
      line-height: 24px;
    }

    .review-text-content {
      font-size: 20px;
      line-height: 30px;
    }

    .sw19s-corp-field label.raised {
      line-height: 16px;
    }

    .name-row {
      gap: 12px;
    }

    .bottom-text p {
      line-height: 16px;
    }

    dialog .title {
      text-align: center;
    }
  }
}

@keyframes sw26-registration-spinner-rotate {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes sw26-registration-submit-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}