.stripe-window
  background: linear-gradient(to bottom, #fff, hsl(0,0,96))

.stripe-card-form
  text-align: center
  header
    position: relative
    height: 80px
    background: $dark-bg-gradient

    .logo
      position: absolute
      height: 100%
      left: 50%
      top: 0
      transform: translateX(-50%)
      img
        width: 140px

    h1
      position: absolute
      top: 50%
      right: 0
      transform: translateY(-50%)
      margin-right: 30px
      color: #fff
      font-family: $condensed-font
      text-transform: uppercase
      font-weight: 100
      font-size: 22px

  .plan-info, form
    width: 100%
    max-width: 423px
    margin: 20px auto 0

  .plan-info
    margin-top: 10px
    .billing-columns:first-of-type
      margin-bottom: 10px
      .column
        float: none

    .billing-columns:last-of-type
      display: inline-block

  section.error
    background: rgba($red, 0.8)
    color: rgba(#000, 0.45)
    border-radius: 4px

    padding: 12px 10px
    margin-bottom: 30px

    .error-message
      color: #fff
      font-weight: 400

    .top
      margin-bottom: 6px

  .trial-remaining
    color: $dark-text
    font-weight: 100
    line-height: 140%
    margin: 10px 0 35px

    strong
      color: $dark-blue
      font-weight: 400

  form
    box-sizing: border-box

    button
      margin-top: 30px

  .stripe-logo
    display: block
    margin: 40px auto





