.account-page {
  padding-bottom: 70px;
}


.account-intro {
  margin-bottom: 26px;
}


.auth-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 24px;
}


.auth-card,
.account-head-card,
.account-list-card {
  background:
    #ffffff;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);
}


.auth-card {
  padding: 30px;
}


.auth-card h2,
.account-head-card h2,
.account-list-card h2 {
  margin:
    7px 0 22px;

  color:
    var(--navy);
}


.auth-card form {
  display: grid;

  gap: 16px;
}


.auth-submit {
  width: 100%;

  margin-top: 6px;
}


/*
|--------------------------------------------------------------------------
| PASSWORD FORGOTTEN
|--------------------------------------------------------------------------
*/

.auth-card > a.auth-submit {
  width: auto;

  min-height: 0;

  margin-top: 12px;

  padding: 0;

  display: inline-block;

  border: 0;

  border-radius: 0;

  background: transparent;

  color: var(--navy);

  box-shadow: none;

  font-size: 11px;

  font-weight: 700;

  line-height: 1.4;

  text-decoration: underline;

  text-underline-offset: 3px;
}


.auth-card > a.auth-submit:hover {
  border: 0;

  background: transparent;

  color: var(--navy);

  box-shadow: none;

  transform: none;
}


.auth-card > a.auth-submit:focus-visible {
  outline:
    2px solid
    rgba(14, 29, 51, 0.25);

  outline-offset: 4px;
}


.account-dashboard {
  display: grid;

  gap: 24px;
}


.account-head-card {
  padding:
    28px 30px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 24px;
}


.account-head-card h2 {
  margin-bottom: 6px;
}


.account-head-card p {
  margin: 0;

  color:
    var(--muted);

  font-size: 13px;
}


.account-head-actions {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;
}


.account-list-card {
  overflow: hidden;
}


.account-list-head {
  padding:
    26px 30px 20px;

  border-bottom:
    1px solid var(--line);
}


.account-list-head h2 {
  margin-bottom: 0;
}


.account-empty {
  padding:
    34px 30px;

  color:
    var(--muted);

  font-size: 13px;

  line-height: 1.55;
}


.account-card-list {
  display: grid;
}


.account-vcard-item {
  padding:
    22px 30px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 22px;

  border-bottom:
    1px solid var(--line);
}


.account-vcard-item:last-child {
  border-bottom: 0;
}


.account-vcard-info {
  min-width: 0;

  display: grid;

  gap: 5px;
}


.account-vcard-info strong {
  color:
    var(--navy);

  font-size: 16px;
}


.account-vcard-info span {
  color:
    #3a3a38;

  font-size: 12px;
}


.account-vcard-info small {
  color:
    var(--muted);

  font-size: 10px;
}


.account-vcard-actions {
  display: flex;

  align-items: center;

  justify-content:
    flex-end;

  gap: 8px;

  flex-wrap: wrap;
}


.account-vcard-actions a {
  text-decoration: none;
}


.account-delete-button {
  min-height: 38px;

  padding:
    8px 13px;

  border: 0;

  background:
    transparent;

  color:
    #8e3434;

  font: inherit;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;
}


.account-status {
  min-height: 22px;

  margin-top: 18px;

  color:
    var(--muted);

  font-size: 12px;
}


.account-status.is-error {
  color:
    #9d3434;
}


@media (max-width: 860px) {

  .auth-grid {
    grid-template-columns:
      1fr;
  }


  .account-head-card,
  .account-vcard-item {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .account-vcard-actions {
    justify-content:
      flex-start;
  }

}

/*
|--------------------------------------------------------------------------
| BUSINESS AUTH MODE
|--------------------------------------------------------------------------
*/

body.is-business-auth .account-intro {
  position: relative;

  padding:
    30px 32px;

  border:
    1px solid
    rgba(201, 169, 106, 0.42);

  border-radius:
    var(--radius);

  background:
    rgba(255, 255, 255, 0.48);
}


body.is-business-auth .account-intro::before {
  content: "";

  position: absolute;

  top: 0;
  left: 32px;

  width: 72px;
  height: 3px;

  border-radius:
    999px;

  background:
    #c9a96a;
}


body.is-business-auth .account-intro h1 {
  margin-top:
    8px;
}


.business-auth-pricing {
  margin-top:
    22px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px 18px;

  flex-wrap:
    wrap;
}


.business-auth-pricing strong {
  color:
    var(--navy);

  font-size:
    15px;
}


.business-auth-pricing span {
  color:
    var(--muted);

  font-size:
    12px;
}


.business-auth-pricing span + span {
  position:
    relative;

  padding-left:
    18px;
}


.business-auth-pricing span + span::before {
  content:
    "·";

  position:
    absolute;

  left:
    2px;

  color:
    #c9a96a;
}


body.is-business-auth .auth-card:first-child {
  border-color:
    rgba(14, 29, 51, 0.16);
}


body.is-business-auth .auth-card:last-child {
  border-color:
    rgba(201, 169, 106, 0.48);
}


@media (max-width: 760px) {

  body.is-business-auth .account-intro {
    padding:
      25px 22px;
  }


  body.is-business-auth .account-intro::before {
    left:
      22px;
  }


  .business-auth-pricing {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;
  }


  .business-auth-pricing span + span {
    padding-left:
      0;
  }


  .business-auth-pricing span + span::before {
    display:
      none;
  }

}